Angularjs:在更新 ng-model 时选择不更新 [英] Angularjs: select not updating when ng-model is updated
问题描述
我创建了以下示例，以便您可以确切地看到发生了什么:http://jsfiddle.net/8t2Ln/101/
如果我使用 ng-options，也会发生同样的事情.我这样做有不同的原因，但为了简化示例，省略了这一部分.
如您所见，它默认有两个选项.我在选择旁边显示 ng-model 的选定值，以便您可以看到它是什么.当您使用最上面的部分添加第三个选项时，它将值设置为该新选项的值，正如选择旁边显示的 ng-model 值所证明的那样，但选择本身不会更改以显示正确的值已选中.
以下是链接中的示例代码:
var testApp = angular.module('testApp', ['ngRoute']);testApp.controller('Ctrl', function ($scope) {$scope.newInput = '';$scope.inputDevice = [{值:'1'，标签:'输入1'},{值:'2'，标签:'输入2'}];$scope.selectedDevice = '';$scope.addType = 函数 () {var newElem = {标签:$scope.newInput，值:'3'};$scope.inputDevice.push(newElem);$scope.selectedDevice = newElem.value;};});这是html:
<div ng-controller="Ctrl"><p><input type="text" ng-model="newInput"/><br/><button ng-click="addType()">添加类型</button></p><选择 ng-model="selectedDevice"><选项></选项><option ng-repeat="i in inputDevice" value="{{ i.value }}">{{ i.label }} - {{ i.value }}</option></选择>{{ selectedDevice }}这正是您不应该使用 ngRepeat 来呈现选择选项的原因.你应该使用 ngOptions 代替:
一般来说，避免使用 ngRepeat 来渲染选择选项.至少有两个很好的理由.ngRepeat 每次迭代都会创建单独的子作用域，这在选项标记的情况下是不需要的.另一个重要的警告是，使用 ngRepeat 您只能将 select 绑定到像字符串这样的原语，但您将无法使用它向 ngModel 写入对象.
这是下面的演示.
angular.module('demo', []).controller('DemoController', function($scope) {$scope.newInput = '';$scope.inputDevice = [{值:'1'，标签:'输入1'}，{值:'2'，标签:'输入2'}];$scope.selectedDevice = '';$scope.addType = function() {var newElem = {标签:$scope.newInput，值:数字($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">添加类型</button></表单><select ng-model="selectedDevice" ng-options="i.value as (i.label + ' - ' + i.value) for i in inputDevice"><option>选择</option></选择>{{ 选定设备 }}I've created the following example so you can see exactly what is happening: http://jsfiddle.net/8t2Ln/101/
The same thing happens if I use ng-options. I have a different reason for doing it this way, but for the simplification of the example left that part out.
As you can see it has by default two options. I'm displaying the selected value of the ng-model next to the select so you can see what it is. When you use the top piece to add a third option it sets the value to the value of that new option as is evidenced by the displayed ng-model value next to the select, but the select itself doesn't change to show the correct value selected.
Below is the sample code at the link:
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;
};
});
And here is the 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>
This is exactly why you should not use ngRepeat to render select options. You should use ngOptions instead:
<select ng-model="selectedDevice"
ng-options="i.value as (i.label + '-' + i.value) for i in inputDevice">
<option></option>
</select>
In general, avoid using ngRepeat for rendering select options. There are at least two good reasons. ngRepeat creates separate child scope per iteration, which is not needed in case of option tag. Another important caveat is that with ngRepeat you can only bind select to primitives like strings, but you won't be able to write object to ngModel with it.
Here is a demo below.
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>
这篇关于Angularjs:在更新 ng-model 时选择不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
