Angularjs：当ng-model更新时select不更新

我已经创build了下面的例子，所以你可以看到到底发生了什么： http : //jsfiddle.net/8t2Ln/101/

同样的事情发生，如果我使用ng选项。 我有这样做的另外一个原因，但是为了简化这个例子，我把这一部分留下了。

正如你可以看到它默认有两个选项。 我在select旁边显示ng模型的选定值，以便看到它是什么。 当您使用顶部部分添加第三个选项时，它会将该值设置为该新选项的值，如select所示的显示的ng-model值所示，但select本身不会更改以显示正确的值select。

以下是链接中的示例代码：

var testApp = angular.module('testApp', ['ngRoute']); testApp.controller('Ctrl', function ($scope) { $scope.newInput = ''; $scope.inputDevice = [ { value: '1', label: 'input1' }, { value: '2', label: 'input2' } ]; $scope.selectedDevice = ''; $scope.addType = function () { var newElem = { label: $scope.newInput, value: '3' }; $scope.inputDevice.push(newElem); $scope.selectedDevice = newElem.value; }; }); 

这里是html：

 <div ng-app="testApp"> <div ng-controller="Ctrl"> <p> <input type="text" ng-model="newInput" /> <br /> <button ng-click="addType()">Add Type</button> </p> <select ng-model="selectedDevice"> <option></option> <option ng-repeat="i in inputDevice" value="{{ i.value }}">{{ i.label }} - {{ i.value }}</option> </select> {{ selectedDevice }}</div> </div> 

Answer 1

这正是为什么你不应该使用ngRepeat渲染select选项。 您应该使用ngOptions来代替：

 <select ng-model="selectedDevice" ng-options="i.value as (i.label + '-' + i.value) for i in inputDevice"> <option></option> </select> 

一般来说，避免使用ngRepeat渲染select选项。 至less有两个很好的理由。 ngRepeat每次迭代ngRepeat创build一个独立的子作用域，这在选项标签的情况下是不需要的。 另一个重要的警告是，使用ngRepeat你只能绑定select到像string的基元，但是你将无法用它写入对象ngModel。

下面是一个演示。

 angular.module('demo', []).controller('DemoController', function($scope) { $scope.newInput = ''; $scope.inputDevice = [ {value: '1', label: 'input1'}, {value: '2', label: 'input2'} ]; $scope.selectedDevice = ''; $scope.addType = function() { var newElem = { label: $scope.newInput, value: Number($scope.inputDevice[$scope.inputDevice.length - 1].value) + 1 }; $scope.inputDevice.push(newElem); $scope.selectedDevice = newElem.value; $scope.newInput = ''; }; }); 

 <script src="ajax/libs/angular.js/1.4.8/angular.min.js"></script> <div ng-app="demo" ng-controller="DemoController"> <form ng-submit="addType()"> <input type="text" ng-model="newInput" /> <button type="submit">Add Type</button> </form> <select ng-model="selectedDevice" ng-options="i.value as (i.label + ' - ' + i.value) for i in inputDevice"> <option>Select</option> </select> {{ selectedDevice }} </div> 

Answer 2

问题在于，因为你没有使用ng-options ，所以当你设置新的selectedDevice时候浏览器还没有完成渲染。 如果你开始使用ng-options你可以使用这个解决方法。 使用$timeout来包装你的$scope.selectedDevice = newElem.value; 以确保在浏览器使用ng-repeat完成渲染更改后运行。

我还添加了代码来增加连续添加的下一个值，因为将其硬编码为“3”意味着即使在添加更多选项时，第三个选项也将不断被选中。

 var testApp = angular.module('testApp', ['ngRoute']); testApp.controller('Ctrl', function($scope, $timeout) { $scope.newInput = ''; $scope.inputDevice = [{ value: '1', label: 'input1' }, { value: '2', label: 'input2' }]; $scope.selectedDevice = ''; $scope.addType = function() { var last = Number($scope.inputDevice[$scope.inputDevice.length - 1].value) + 1; var newElem = { label: $scope.newInput, value: last.toString() }; $scope.inputDevice.push(newElem); $timeout(function() { $scope.selectedDevice = newElem.value; }, 0); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script> <div ng-app="testApp"> <div ng-controller="Ctrl"> <p> <input type="text" ng-model="newInput" /> <br /> <button ng-click="addType()">Add Type</button> </p> <select ng-model="selectedDevice"> <option></option> <option ng-repeat="i in inputDevice" value="{{ i.value }}" ng-selelected="{{ selectedDevice == i.value }}">{{ i.label }} - {{ i.value }}</option> </select> {{ selectedDevice }} </div> </div> 

Answer 3

我有一个类似的问题，原因是我的钥匙是一个数字，但当试图设置另一个值我发送一个string。 在这种情况下，解决方法是强制将模型值设置为与键相同的types。

例如：

 <select ng-model="model" ng-options="option.{{ key }} as option.{{ label }} for option in options"> <option value="">{{ emptyLabel }}</option> </select> 

 if (scope.options.length > 0) { scope.keyType = typeof(scope.options[0][scope.key]); } 

…

 if (scope.keyType == 'number') { scope.model = parseInt(newVal, 10); } else { scope.model = newVal; } 

Answer 4

我有同样的问题。 什么解决了我的是转换为string的数字。 例：

 $scope.selectedDevice = "" + newElem.value; 

Answer 5

我有同样的问题select不更新时，ng模型更新。 我从基于键值对的数组中提取对象的函数中检索ng-model的值。

在这样做的时候，返回的对象具有hashkey属性$$hashKey: "object:115"

当我使用angular.copy创build了一个对象的副本时，就会出现这个问题，这个“hashkey”属性被剥离了，因此不会被选中。

在我重新编写代码之后，在angular.copy之后得到ng-model的值，问题就解决了

 ConstructorReviewers: function (oItem) { this.PERSON_ID = oItem.PERSON_ID; this.CHAIR_PERSON = oItem.CHAIR_PERSON; /* // Commented this part and added it to EditItem function this.oDepartment = CommonFactory.FindItemInArray(vm.oCommittee.arrDepartments, 'NAME', this.DEPARTMENT, 'item'); */ this.EditItem = function () { vm.EditItemOriginal = this; angular.copy(this, vm.EditItem); // After this update the ng-model into vm.EditItem.oTitle object vm.EditItem.oTitle = CommonFactory.FindItemInArray(vm.oCommittee.arrTitles, 'TITLE', vm.EditItem.TITLE, 'item'); vm.Popup.ShowPopup(true, 'new_edit', Constants.Mentoring.Popup.Edit); } }