为什么 ng-model 不更新控制器值 select？

Question

这是代码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>

这是代码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 :(
});

在视图中，每次更改 select 时都会更新新值，但控制器不会更新 select 的当前值。我该怎么办？

谢谢！

Answer 1

要更新或更改控制器内的值，您可以在其上编写 ng-change 函数。然后你可以检查控制器中的更新值。

标记

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

代码

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

其他方式可能是您可以在某处对 html 使用 {{selectedItem}}。这也将提供有关 selectedItem 值如何更新的想法。

Answer 2

因为你总是取控制器中数组的第一项，

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

像这样改变你的JS，

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

并且视图使用 ng-change 获取所选项目

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

为什么 ng-model 不更新控制器值 select？

Why ng-model does not update controller value select?

html

javascript

angularjs

ng-options

angularjs-ng-model