为什么 ng-model 不更新控制器值选择？答案

【问题标题】：Why ng-model does not update controller value select?为什么 ng-model 不更新控制器值选择？
【发布时间】：2015-08-16 17:56:48
【问题描述】：

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

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

谢谢！

【问题讨论】：

你怎么知道控制器没有新值？在您提供的代码中，您只调用一次console.log（在页面加载时）。

标签： javascript html angularjs ng-options angularjs-ng-model

【解决方案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 值如何更新的想法。

【讨论】：

@VirajNalawade 你应该去争取它..谢谢你的赞赏.. :)

【解决方案2】：

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

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

像这样改变你的JS，

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

View 使用 ng-change 获取选中项

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

【讨论】：

嗯，确实发生了:)
@alvarezsh 如果有帮助请标记为答案