Perché ng-model non aggiorna la selezione del valore del controller?

Question

Questo è il codice 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> 

Questo è l'AngularJS codice:

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 :(
}); 

nella vista il nuovo valore aggiornato ogni volta che cambio il prescelto, ma il controllore non aggiorna la corrente valore della selezione. Cosa dovrei fare?

Grazie!

Answer 1

Per essere aggiornato o modificare il valore all'interno del controller, è possibile scrivere su di esso la funzione ng-change. Quindi è possibile controllare il valore aggiornato all'interno del controller.

Markup

<select ng-model="selectedItem" ng-options="item.name for item in items" 
    ng-change="changeSelectedItem()"> 
</select> 

Codice

$scope.changeSelectedItem = function(){ 
    console.log($scope.selectedItem); 
} 

altro modo potrebbe essere si può semplicemente utilizzare {{selectedItem}} in html da qualche parte. Ciò darà anche un'idea del modo in cui il valore selectedItem si sta aggiornando.

Answer 2

Poiché si sta sempre prendendo il primo elemento della matrice nel controller,

$scope.selectedItem = $scope.items[0]; 
console.log($scope.selectedItem); 

Basta modificare le JS come questo,

$scope.changeSelectedItem = function(){ 
    console.log($scope.selectedItem); 
} 

e la vista utilizzare il ng-change per ottenere l'articolo selezionato

<select ng-model="selectedItem" ng-options="item.name for item in items" 
    ng-change="changeSelectedItem()"> 
</select>