Angularjs:选择当ng-model更新时不更新
我已经创建了下面的示例，这样您就可以确切地看到发生了什么：http://jsfiddle.net/8t2Ln/101/
如果我使用ng-options，也会发生同样的事情。我这样做有一个不同的原因，但为了简化示例，省略了这一部分。
正如您所看到的，默认情况下它有两个选项。我在select旁边显示ng-model的选定值，这样您就可以看到它是什么。当您使用顶部部分添加第三个选项时，它会将值设置为该新选项的值，就像select旁边显示的ng-model值所证明的那样，但是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>回答 4
Stack Overflow用户
发布于 2014-10-06 15:35:12
这正是您不应该使用ngRepeat呈现选择选项的原因。您应该改用ngOptions：
<select ng-model="selectedDevice"
ng-options="i.value as (i.label + '-' + i.value) for i in inputDevice">
<option></option>
</select>通常，避免使用ngRepeat呈现选择选项。至少有两个充分的理由。ngRepeat在每次迭代中创建单独的子范围，这在option标记的情况下是不需要的。另一个重要的警告是，使用ngRepeat时，您只能将select绑定到字符串等基本类型，但不能使用它将对象写入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="https://cdnjs.cloudflare.com/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>
Stack Overflow用户
发布于 2014-10-06 15:59:58
问题是，由于您没有使用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>
Stack Overflow用户
发布于 2015-12-11 03:15:18
当更新ng-model时，我也遇到了select not updated的问题。我从一个函数中检索ng-model的值，该函数根据键、值对从数组中提取对象。
在执行此操作时，返回的对象具有hashkey属性$$hashKey: "object:115"
当我使用angular.copy创建对象的副本时，出现了这个问题，它去掉了这个“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);
}
}https://stackoverflow.com/questions/26211573
复制相似问题