AngularJS Select does not bind to Ng model
My angular choice is optional. I can tell the value is correct, but the selection is not updated. Why is there no binding if the value is there?
<div ng-controller="MyController" ng-app>
<select class="form-control" ng-model="colorId"ng-options="color.id as color.name for color in colorList">
<option value="">--Select a Color--</option>
</select>
<input type="button" value="submit" ng-click="Select()"></input>
function MyController($scope) {
$scope.colorList = [{
id: '1',
name: 'red'
}, {
id: '2',
name: 'blue'
}, {
id: '3',
name: 'green'
}];
var colorId = 3;
$scope.colorId = colorId;
alert($scope.colorId);
$scope.Select = function () {
var colorId = 2;
$scope.colorId = colorId;
}
}
Here is the violin:
source to share
you need to change id to string when Select is selected
$scope.Select = function () {
console.log('select fired');
var colorId = 1;
$scope.mySelection.colorId = colorId + "";
}
http://jsfiddle.net/bxkwfo0s/2/
Next, you must use the object property, not just the scope variable, this will ensure that the model binds correctly
ng-model="mySelection.colorId"
where the object can be something simple
$scope.mySelection = {colorId : colorId };
source to share
There are two errors in the code:
- You are using colorList as your model in ng variants, but you are calling its datasets in your controller.
- You are using strings for id, but setting $ scope.colorId for number.
Below is an updated fiddle changing ids to numbers and changing $ scope.datasets to $ scope.colorList
function MyController($scope) {
$scope.colorList = [{
id: 1,
name: 'red'
}, {
id: 2,
name: 'blue'
}, {
id: 3,
name: 'green'
}];
var colorId = 3;
$scope.colorId = colorId;
alert($scope.colorId);
$scope.Select = function () {
var colorId = 2;
$scope.colorId = colorId;
}
}
source to share
Consider making your ng model an object, specifically one of the objects already in your $ scope.colorList. If you do this, you can avoid the post-processing that you do in the click handler.
So your choice will look like this:
<select class="form-control" ng-model="selectedColor"
ng-options="color.name for color in colorList"></select>
One trick is that if you have an object in your controller that just looks like your red object, for example, $scope.selectedColorObj = { id: '1', name:'red' }
and set select ng-model for that model, it won't work. Angular will see that you are setting in the ng-model an object that is actually not in your data source, and will add an additional option with value="?"
in this case I use $filter
to get the corresponding array element:
$scope.colorId = '3';
$scope.selectedColor = $filter('filter')( $scope.colorList,{ id: $scope.colorId})[0];
source to share