I am able to successfully populate a dropdown from values in a service and can output the selected value on page, but I need to pass these into an array so I can store the selected values. The desired functionality is that I can add and remove items from the array on page from the list of options.
The issue I am having is that when I hit the add button, it is stating that it is "Unable to get property 'value' of undefined or null reference". I don't believe I need to be passing the selected value into the add function as it is an ng-model and it outputs on page, but I am starting to wonder if that is what is preventing me from adding the selected values to an array.
Here is my HTML:
<label for="Event_Cat" class="col-xs-12 col-md-3 nonwrap lead">Categories</label>
<div class="col-xs-12 col-md-4">
<select class="form-control" id="Event_Cat" data-ng-model="selectedCategory"
data-ng-options="opt as opt.label for opt in categoryValues | orderBy:'label'" required>
<option style="display:none" value="">Select a Category</option>
</select>
</div>
{{selectedCategory.label}}
<div class="hidden-xs hidden-sm col-md-2">
<button type="submit" class="form-control" data-ng-click="addItem({{selectedCategory.label}})">Add <i class="fa fa-angle-right"></i></button>
<br />
</div>
Here is the relevant part of my controller. Please note that the dropdown is populating as desired, it is just the saving the selected item to an array that is an issue:
// Get list of values for use in the Category dropdown
$scope.categoryValues = [];
// Array to store selected values
$scope.storedCategoryValues = [];
// Query REST service for values
appDetailedEventsList.query(function (categorydata) {
var categoryValues = categorydata.value; // Data is within an object of "value", so this pushes the server side array into the $scope array
// Foreach type, push values into types array
angular.forEach(categoryValues, function (categoryvalue, categorykey) {
$scope.categoryValues.push({
label: categoryvalue.Title,
value: categoryvalue.ID,
});
})
});
// Add selection to array
$scope.addItem = function () {
$scope.storedCategoryValues.push({
id: $scope.selectedCategory.value,
title: $scope.selectedCategory.label
});
console.log($scope.storedCategoryValues);
}
I don't know why are you using ng-submit , since I see there is no form element in your html. Hence remove ng-submit if ur not using it.
Also you don't need to pass selectedCategory as an argument to the function, since you're not using it.
If you wanna pass selectedCategory as an argument you should not use brackets inside function argument.
ng-click = "addItem(selectedCategory)"
----html code ----
<div ng-app>
<h2>Todo</h2>
<div ng-controller="appCtrl">
<label for="Event_Cat" class="col-xs-12 col-md-3 nonwrap lead">Categories</label>
<div class="col-xs-12 col-md-4">
<select class="form-control" id="Event_Cat" data-ng-model="selectedCategory"
data-ng-options="opt as opt.label for opt in categoryValues | orderBy:'label'" required>
<option style="display:none" value="">Select a Category</option>
</select>
</div>
{{selectedCategory.label}}
<div class="hidden-xs hidden-sm col-md-2">
<button class="form-control" ng-click="addItem()">Add <i class="fa fa-angle-right"></i></button>
<br />
</div>
</div>
</div>
--- js code ----
function appCtrl($scope) {
// Get list of values for use in the Category dropdown
$scope.categoryValues = [{label:'label1',value:'value1'},{label:'label2',value:'value2'}];
// Array to store selected values
$scope.storedCategoryValues = [];
// Query REST service for values
// Add selection to array
$scope.addItem = function () {
$scope.storedCategoryValues.push({
id: $scope.selectedCategory.value,
title: $scope.selectedCategory.label
});
console.log($scope.storedCategoryValues);
}
}
I have made the above changes and updated in jsFiddle
Thanks all. The issue was the DOT notation, as I am using a page level controller. Making the following changes worked for me:
Declare as VM in the App.js controller binding:
when('/my-form', { templateUrl: '/views/my-form.html', controller: 'appCtrl as vm' }).
Use vm. as a prefix for selectedCategory:
<select class="form-control" id="Event_Cat" data-ng-model="vm.selectedCategory"
data-ng-options="opt as opt.label for opt in categoryValues | orderBy:'label'" required>
<option style="display:none" value="">Select a Category</option>
</select>
</div>
{{selectedCategory.label}}
<div class="hidden-xs hidden-sm col-md-2">
<button class="form-control" data-ng-click="addItem()">Add <i class="fa fa-angle-right"></i></button>
<br />
</div>
Updated the controller to reference the vm notation:
// Add Category
$scope.addItem = function () {
$scope.storedCategoryValues.push({
id: $scope.vm.selectedCategory.value,
title: $scope.vm.selectedCategory.label
});
console.log($scope.storedCategoryValues);
}
Related
I have multiple select with different values. When the user selects the options that he wishes, press add button and must be added as elements to an array and that new line of added options be displayed in the view.
This does not work correctly, since each new selection steps on the values of the previous one. Only the last chosen option prevails. Example of my wrong array of values:
[{"product":"Product3","type":"A"},{"product":"Product3","type":"A"},{"type":"Product3","type":"A"}]
Here is my code:
<div class="col-md-3">
<label for="product" class="control-label">Product</label>
<select class="form-control pull-right" name="product" ng-model="data.product" >
<option ng-repeat='(key,value) in productList' value="{{key}}">{{value}}</option>
</select>
</div>
<div class="col-md-3">
<label for="type" class="control-label">Type</label>
<select class="form-control pull-right" name="type" ng-model="data.type" >
<option ng-repeat='i in typeList' value="{{i}}">{{i}}</option>
</select>
</div>
<button type="button" class="btn" ng-click="addElements()" >Add</button>
<div class="col-md-3">{{elementsList}}</div>
And in my angular controller:
$scope.elementsList = [];
$scope.addElements = function() {
$scope.elementsList.push($scope.data);
}
What's my problem? I am new in angular and js and it is difficult for me to see it ... how can I add and remove elements dynamically? Thanks!
When you add the $scope.data object to the array in addElements, it adds a reference to that object because that's how Javascript objects are stored: by reference. What that means is that any time that $scope.data changes in the future, the value you see in the array will also change. So you can do something like this instead:
$scope.addElements = function() {
const clone = Object.assign({}, $scope.data);
$scope.elementsList.push(clone);
}
This creates a new object clone each time.
I want to ask 2 questions.
I have created dynamic dropdown (class and section) using jquery and
assign the id's like [myclass0, myclass1] [mysection0, mysection1]
etc. Now I want to retrieve the values of both and store in a
variable or array then I will use these variable for sending it to
database. I have done the following code but it's not working and
even it's not showing the ID of dynamic created dropdown.
How to select the values of classes and sections and how to loop them so that valid data will be sent to database?
here is my code
<div class="row">
<div class="col-sm-12" id="dynamic_select">
</div>
</div>
<input type="button" name="" value="Add Class" class="btn btn-primary" id="addclass" style="margin-top: 50px;" onclick="addMore();">
here is my JS:
function addMore(){
var inps = $('#dynamic_select > div:last').data('count')+1 || 0;
$('#dynamic_select').append('<div data-count="'+inps+'"><div class = "col-sm-5"><label>Select Class</label> <select id="childclass'+inps+' " class="form-control"> <option value="9">IX</option><option value="10">X</option><option value="11">FSC I</option><option value="12">FSC II</option></select> </div> <div class = "col-sm-5"><label>Select Section</label> <select id="childsection'+inps+' " class="form-control"> <option value="A">A</option><option value="B">B</option><option value="C">C</option></select></div> <a class=remove>X</a>');
}
Try this (example for #dynamic_select):
$('#dynamic_select select').val();
or
$('#dynamic_select).on('change', function() {
$('#dynamic_select select').val();
});
I am new to angular and I'm confused over this thing. I'm trying to populate a select box based on object inside an array. I want selectbox by using ng-repeat for that array... but initially i need to show only one selectbox after clicking add() next selectbox has to come. for ref:[initially one selectbox has to come]
HTML
<div class="col-lg-12" id="variant1" style="margin-top:10px" ng-repeat="variant in variants">
<div class="col-lg-4" style="text-align:right;padding-top:2px;padding-right: 20px" >
<label for="variant1name">Variant Name</label>
</div>
<div class="col-lg-6" >
<div >
<select class="form-control" ng-model="filterFormInputs.apps" ng-options="app.Application for app in variants" >
<option value="" disabled selected>Select an Application</option>
</select>
<label ng-repeat="checkbox in filterFormInputs.apps.details">
<input class="ecomtexttype1" type="checkbox" ng-model="checkbox.checked"> {{checkbox.name}}
</label>
</div>
</div>
</div>
Controller:
$scope.variants =
[
{"Application": "Color", "details":[{"name":"red"},{"name":"blue"},{"name":"black"}]},
{"Application": "Color", "details":[{"name":"red"},{"name":"blue"},{"name":"black"}]},
{"Application": "Color", "details":[{"name":"red"},{"name":"blue"},{"name":"black"}]}
]
I think that you can just have your add() function update the array... if things are configured correctly the new row should render due to the binding on the array.
As mentioned in comments you did not provide enough source code, so here is the assumed pseudo-code:
in html you might have
<button ng-click="$scope.add()">Add</button>
so in the controller
$scope.variants = [
// array of whatever you are displaying
{"foo":"bar1"},
{"foo":"bar2"}
];
$scope.add = function() {
variants.push({"foo":"bar_new"});
}
Have you considered using a Directive for this? That may work better, depending on your situation. Look into this: https://docs.angularjs.org/guide/directive
This problem has been frustrating me for the last couple days now so, here I am. I'll try to be as clear as possible.
I have an object to retrieve from the database. This object is used to create dropdown menus. It has two properties on it: A section property, which contains one string. The other property is called value, which contains all the possible options that the user can select in the dropdown. I use two nested ng-repeats in my HTML to create the dropdowns.
I am trying to send out to the database a formData object that has 2 properties in it: the name of the dropdown menu, and the value that the user selected. Appending the value selected from the dropdown menu is easy thanks to two way data binding that I set on the select element. However, I CANNOT figure out how to grab the value from the label element inside my controller so that I can attach it to my formData object. As far as I know, ng-model does not work on a label element. Here is the HTML, which hopefully will make it a bit more clear:
<form class="form-horizontal" ng-controller="PreferenceCtrl">
<div ng-repeat="(name, section) in configs">
<label ng-bind="name"></label>
<select class="form-control" ng-model="formData.settings[$index].value">
<option value="" disabled="disabled">---Please Select Option---</option>
<option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value">
</option>
</select>
</div>
<div class="col-md-12" ng-include="gametemp"></div>
<div class="row">
<div class="hr-line-dashed"></div>
<div class="text-center col-md-12 padding-15">
<button class="btn btn-primary btn-lg" ng-click="saveSetting()" formnovalidate translate>
<i class='fa fa-circle-o-notch fa-spin' ng-if="showBusy"></i> Save
</button>
</div>
</div>
</form>
Because the <select> class can have an ng-model attached to it, I can easily capture that value in my controller. I cannot do the same with the label. If anyone can help me out I will forever be your best friend. Thank you!
In answer to your question title "Is there a way to create a two-way binding on a label element", no, that isn't possible.
But if I understand correctly what you're trying to do, it sounds like you want to save data to the database based on information contained in both the <label> and it's associated <select>. If that's true, then I'd recommend using an ng-change function in your <select> like this:
<select class="form-control" ng-model="formData.settings[$index].value" ng-click="dropdownItemClicked(name, formData.settings[$index].value)">
<option value="" disabled="disabled">---Please Select Option---</option>
<option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value">
</option>
</select>
In your controller, create a function to handle this ng-click event:
$scope.dropdownItemClicked = function(name, value) {
console.log(name, value);
// save name/value to database
}
The key is to pass in the exact data you want to save to the database into your dropdownItemClicked() function.
Could you just put the value inside the label?
<label ng-bind="name">{{formData.settings[$index].value}}</label>
There is no way to read from the label. It is the one way binding after all, right. I would do something like this.
var app = angular.module('MyApp', []);
app.controller("MyCtrl", function($scope){
$scope.formData = {
settings:[]
};
$scope.configs = {
'Label1': [{ value: 11 }, { value: 12 }],
'Label2': [{ value: 21 }, { value: 22 }]
};
$scope.change = function(name, idx) {
$scope.formData.settings[idx].name = name;
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-cloak="" ng-app="MyApp">
<form class="form-horizontal" ng-controller="MyCtrl">
<div ng-repeat="(name, section) in configs">
<label ng-bind="name"></label>
<select class="form-control" ng-model="formData.settings[$index].value" ng-change="change(name, $index)">
<option value="" disabled="disabled">---Please Select Option---</option>
<option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value">
{{item.name}}
</option>
</select>
</div>
<div class="col-md-12" ng-include="gametemp"></div>
<div class="row">
<div class="hr-line-dashed"></div>
<div class="text-center col-md-12 padding-15">
<button class="btn btn-primary btn-lg" ng-click="saveSetting()" formnovalidate translate>
<i class='fa fa-circle-o-notch fa-spin' ng-if="showBusy"></i> Save
</button>
</div>
</div>
<div>
{{formData.settings}}
</div>
</form>
</div>
I am generating dropdown at runtime using AngularJs. I also want to bind corresponding options with it which will be generated based on dropdown type being created.
<div class="form-group" ng-repeat="attrib in col1Attribs">
<label class="control-label" for="txtCode">{{attrib.displayText}}</label>
<select class="form-control"
ng-options="item.configValue for item in configOptions(attrib.configType)" />
</div>
My controller has following method.
$scope.configOptions = function (type){
return SmartCache.get(type); //SmartCache is my cacheFactory
}
EDIT:
Here is my data when parameter type = 'Status'
[{"$id":"1","people":[],"configId":"STAT001","configValue":"Active","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Active","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHM=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]},{"$id":"2","people":[],"configId":"STAT002","configValue":"Suspended","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Suspended","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHQ=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]},{"$id":"3","people":[],"configId":"STAT003","configValue":"Terminated","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Terminated","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHU=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]},{"$id":"4","people":[],"configId":"STAT004","configValue":"Deleted","startDate":"2014-01-31T00:00:00","endDate":"9999-01-01T00:00:00","description":"Deleted","status":1,"parentId":null,"isSelectable":true,"timestamp":"AAAAAAAAKHY=","isSystemData":true,"children":[],"parent":null,"personAttributes":[],"items1":[]}]
I am able to achieve my task using code below but not using ngOptions.
<div class="form-group" ng-repeat="attrib in col1Attribs">
<label class="control-label" for="txtCode">{{attrib.displayText}}</label>
<select class="form-control">
<option ng-repeat="c in configOptions(attrib.configType)" value="{{c.configId}}">
{{c.configValue}}</option>
</div>
</div>
Try this jsFiddle
I can't see the rest of your code. Here is a snippet of how to create the dropdown:
<select data-ng-options="e.description for e in configOptions" data-ng-model="selectedOption" />
Demo:http://plnkr.co/edit/YcuqZ1gs4iDAAgfLrZPO?p=preview
Probably you are trying this
Use as
<select class="form-control"
ng-options="item.configId as item.configValue for item in configOptions(attrib.configType)" />
configId adds as option value and configValue as display value.