In my Angularjs project, I have problem while using ng-model inside ng-repeat. When i select the value in select box, the selectbox automatically gets selected with previous selected value. I think this is due to the same ng-model inside ng-repeat. How can we fix this issue?
HTML:
<div ng-repeat="x in data">
<select class="selectbox_menulist" ng-change="endpoint.showEndPointStatsData()" ng-model="graphSelect.value">
<option ng-repeat="opt in mapOptions" value="{{opt.value}}">{{opt.type}}</option>
</select>
</div>
JS:
$scope.mapOptions = [
{ value: "bytes",type:"Bytes/sec" },
{ value: "packets",type:"Packets/sec"},
{ value: "megabytes",type:"Megabytes/sec"}
];
showEndPointStatsData: function() {
console.log('Function called ====');
console.log($scope.graphSelect.value);
}
Use array to store value of mutli ng-model in ng-repeat:
<div ng-repeat="x in data track by $index">
<select class="selectbox_menulist" ng-change="endpoint.showEndPointStatsData($index)" ng-model="graphSelect[$index]">
<option ng-repeat="opt in mapOptions" value="{{opt.value}}">{{opt.type}}</option>
</select>
</div>
$scope.mapOptions = [{ value: "bytes",type:"Bytes/sec" }, { value: "packets",type:"Packets/sec"},{ value: "megabytes",type:"Megabytes/sec"}];
$scope.graphSelect = new Array($scope.data.length);
showEndPointStatsData: function(index) {
console.log('Function called ====');
console.log($scope.graphSelect[index]);
ng-model inside ng-repeat
jsfiddle
The above link has good description on how to use it with examples
Related
In Angular.JS, is there a way to bind two different ng-models when a select drop down option is selected?
Angular code:
<select ng-model="vm.data.styleId" ng-options="item.id as item.name for item in vm.getStylesData.styles">
<option value="">Select a Style</option>
</select>
Results in:
<option value="{{item.id}}">{{item.name}}</option>
With the Angular code I have so far, when an option is selected, it will save the option's value to the ng-model. In this case item.id is bound to vm.data.styleId.
However in addition to this, I also need to bind the 'item.name' of the selected option. Basically, when an option is selected, I need to bind both the item.id to vm.data.styleId, and the item.name to vm.data.name.
Is there an easy way to do this using Angular.JS?
Solution (using the answer from lisa p.):
In the View:
<select ng-model="vm.styleItem" ng-change="vm.getDetails()" ng-options="item as item.name for item in vm.getStylesData.styles">
<option value="">Select a Style</option>
</select>
Inside the controller:
vm.getDetails = function () {
// set the values of the select drop down
vm.data.styleId = vm.styleItem.id;
vm.data.style = vm.styleItem.name;
}
You can bind to an object containing both values like
item = { styleId: 23, name: "the name" }
vm.data = {{ styleId: ..., name: ... }}
then you bind to vm.data with
<option value="{{item}}">{{item.name}}</option>
Controller
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.vm.data.styleId = "";
$scope.item = {id : '1', name : 'name'};
});
html
<div ng-controller="myCtrl">
<select ng-model="vm.data.styleId" ng-options="item.id as item.name for item in vm.getStylesData.styles">
<option value="{{item}}">{{item.name}}</option>
</select>
</div>
Make an object which holds both id and name and pass that object as value to option
How can I set the selected value of a dropdown when I edit an item ?
<div class="form-group">
<label for="category" class="col-sm-2 control-label">Category</label>
<div class="col-sm-10">
<select ng-model="quiz.category" ng-options="category as category.name for category in categories" required>
<option></option>
</select>
</div>
</div>
And when I click on edit
$scope.editQuiz = function(quiz)
{
$scope.quiz = {};
$scope.quiz.name = quiz.name // this works fine
$scope.quiz.category = quiz.category[0]; // ?????
console.log($scope.quiz.category);
//$scope.quiz = quiz;
}
Method to get categories:
$scope.getCategories = function() {
$http.get('http://localhost/myappi/API/index.php/Api/categories').
success(function(data) {
$scope.categories = data;
})
.error(function(err) {
console.log('error',err);
})
};
Ok if you really want to keep quiz.category as an array.
At first when you get the quiz assign quiz.category to an new object.
e.g:
$scope.tmp = { category: quiz.category[0] };
We have to do that since quiz.category is an array but the value of the ng-options is an object.
now we can bind that var to the options like this:
<select ng-model="tmp.category" ng-options="category as category.name for category in categories" required>
<option></option>
</select>
and finally in your function you replace the old value with the new:
$scope.quiz.category[0] = tmp.category;
Hope it makes sense
Changing the select's ngModel is definitely the way to go. You can check out this solution, since I believe it deals with the same problem.
$scope.options = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
$scope.selectedOption = $scope.options[1];
<select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>
Can you send us your data structure sample?
Use "track by" inside the ng-options
category as category.name for category in categories track by category.id
working example
This is the code HTML:
<div ng-controller="SelectCtrl">
<p>selected item is : {{selectedItem}}</p>
<p> age of selected item is : {{selectedItem.age}} </p>
<select ng-model="selectedItem" ng-options="item.name for item in items">
</select>
</div>
This is the code AngularJS:
var app = angular.module('myApp', []);
app.controller('SelectCtrl', function($scope) {
$scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }];
$scope.selectedItem = $scope.items[0];
console.log($scope.selectedItem); //it's not update :(
});
in the view the new value updated every time I change the select, but the controller does not update the current value of the select. What should I do?
Thanks!
To get updated or change value inside your controller, you could write ng-change function on it. Then you could check the updated value inside controller.
Markup
<select ng-model="selectedItem" ng-options="item.name for item in items"
ng-change="changeSelectedItem()">
</select>
Code
$scope.changeSelectedItem = function(){
console.log($scope.selectedItem);
}
Other way could be you could simply use {{selectedItem}} on html somewhere. That will also give an idea about how selectedItem value is updating.
Because you are always taking the first item of the array in the controller,
$scope.selectedItem = $scope.items[0];
console.log($scope.selectedItem);
Just change your JS like this,
$scope.changeSelectedItem = function(){
console.log($scope.selectedItem);
}
And the View use the ng-change to get the selected item
<select ng-model="selectedItem" ng-options="item.name for item in items"
ng-change="changeSelectedItem()">
</select>
I am generating some <option> elements using the ng-repeat directory. Using ng-repeat instead of ng-options is intentional.
However, it generates an empty option in addition to the actual array. Here's the code:
<select name="type" class="form-control" ng-model="selected_type" ng-change="select_change()" >
<option ng-repeat="type in types" value="{{type.value}}">{{type.name}}</option>
</select>
$scope.types = [
{value: '1', name: 'Sale'},
{value: '2', name: 'Other'}
];
$scope.selected_type = $scope.types[0].value;
And a fiddle: http://jsfiddle.net/HB7LU/521/
Here's a working fiddle, using ng-options
http://jsfiddle.net/HB7LU/527/
<select ng-model="selected_type" ng-change="select_change()" ng-options="c.name for c in types">
Then on script.js:
$scope.selected_type = $scope.types[0];
With that said, since you're just partly using angularjs you can just map the data in an array before you actually post in say in PHP.
try ng-options instead of making options tag yourself:
<div ng-controller="MyCtrl">
<select ng-model="selected_type" ng-change="select_change()" ng-options="type.value as type.name for type in types">
</select>
</div>
http://jsfiddle.net/aBPdv/
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.types = [
{value: '1', name: 'Sale'},
{value: '2', name: 'Other'}
];
$scope.selected_type = $scope.types[0].value;
$scope.select_change = function(x){
alert($scope.selected_type);
}
}
Just use the ng-model attributes on your option tag not on your select tag (use it where the ng-repeat is defined) like that :
<select ng-change="select_change()">
<option ng-model="selected_type" ng-repeat="type in types" value="{{type.value}}">{{type.name}}</option>
</select>
Then change your
$scope.selected_type = $scope.types[0].value;
to
$scope.selected_type = $scope.types;
But your ng-change will not work because no ng-model attribute is set so no ngModelController is assign to this element.
So if you want to know when the value of the select change you have to do a directive on the select element.
For all these reasons ng-options is always and i say always the right direction for a select input usage.
the curly braces syntax interpolation is used to bind the data from model to view in angularjs.
Generally we display text using it.
Can we populate dropdownlist using the {{}} syntax in any way?
<select>
<option ng-repeat="item in items" value="item.value">{{item.title}}</option>
</select>
You certainly can populate a dropdownlist using the curly braces in angular, but it won't have the expected effect.
If you want to have the data-binding in your select box, you should use the select directive which writes the option tags in a similar way the ng-repeat directive would.
Here's an example:
js:
$scope.selectables = [
{ label: 'A', value: 1},
{ label:'B', value: 2},
{ label: 'C', value: 3}
];
// this is the model that's used for the data binding in the select directive
// the default selected item
$scope.selectedItem = $scope.selectables[0];
html:
<select
ng-model="selectedItem"
ng-options="o.label for o in selectables">
</select>
<p>Selected item value: {{selectedItem.value}}</p>
Here's a demo to clear things up: http://jsfiddle.net/gion_13/TU6tp/
Well, you can populate a dropdownlist this way :
<select ng-model="myItem" ng-options="item.name for item in items"></select>
The selected item will be stored in $scope.myItem.
Check this page : http://docs.angularjs.org/api/ng.directive:select
Hope it helps.
You can do something like this:
<select ng-model="searchDropdown" ng-class="{active: isDropdownActive}">
<option ng-repeat="item in data.results" value="{{ item[settings.filterOptions[0].value] }}" >{{ item[settings.filterOptions[0].value] }}</option>
</select>