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.