javascript AngularJS 选择 - 在控制器中设置 ng-model 不会更新选定的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20731549/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS Selection - setting ng-model in controller does not update selected value
提问by liorafar
I'm facing a problem in upgrading my ng-model in selection.
I have the following HTML:
我在选择升级我的 ng-model 时遇到问题。
我有以下 HTML：
<div ng-app>
<div ng-controller="Ctrl">
<select ng-model="viewmodel.inputDevice"
ng-options="i.label for i in viewmodel.inputDevices">
</select>
</div>
</div>
And the following code:
以及以下代码：
function Ctrl($scope) {
// view model
$scope.viewmodel = new function () {
var self = this;
var elem1 = {
value: '1',
label: 'input1'
};
var elem2 = {
value: '2',
label: 'input2'
}
self.inputDevices = [elem1, elem2];
self.inputDevice = {
value: '1',
label: 'input1'
};
};
}
You can use the following JSFiddle
您可以使用以下JSFiddle
What I want to do is put in inputDevicethe same values that the first device has in the collection inputDevices.
I know that I can pass elem1and it will work however i can't do it since i want to save the selection in Local Storage and than restore it to the ng-model object.
Any suggestion will be grateful
Thanks
我想要做的是在inputDevice 中放入与第一个设备在集合inputDevices 中相同的值。
我知道我可以通过elem1并且它可以工作，但是我不能这样做，因为我想将选择保存在本地存储中，而不是将其恢复到 ng-model 对象。
任何建议将不胜感激
谢谢
采纳答案by juco
You can either store the value instead of the object as Maxim has demonstrated, or you can pull the correct value from the inputDevicesarray with something like:
您可以存储值而不是像 Maxim 所演示的对象，或者您可以使用以下内容从inputDevices数组中提取正确的值：
self.inputDevice = self.inputDevices.filter(function(item) {
return item.value == storedValue.value;
})[0];
as per an updated fiddle
根据更新的小提琴
回答by angabriel
The code in the original question works for me:
原始问题中的代码对我有用：
<div ng-app>
<div ng-controller="Ctrl">
<select ng-model="viewmodel.inputDevice"
ng-options="i.label for i in viewmodel.inputDevices">
</select>
<!-- displays the initial and any further selections
correctly as : {"value":"1","label":"input1"} -->
<span>{{viewmodel.inputDevice}}</span>
</div>
</div>
Your js code code works no doubt, but the viewmodel can be build a little easier:
您的 js 代码代码毫无疑问可以工作，但是可以更轻松地构建视图模型：
function Ctrl($scope) {
// view model
$scope.viewmodel = {inputDevices: [
{value: '1', label: 'input1'},
{value: '2', label: 'input2'}
]};
$scope.viewmodel.inputDevice = $scope.viewmodel.inputDevices[0];
}
}
jsfiddlehttp://jsfiddle.net/8t2Ln/39/
jsfiddle http://jsfiddle.net/8t2Ln/39/
回答by Maxim Shoustin
Instead:
反而：
self.inputDevice = {
value: '1',
label: 'input1'
};
I would store index only:
我只会存储索引：
self.inputDevice = 0; // or 1 - second item
and:
和：
<select>
<option ng-repeat="i in viewmodel.inputDevices"
value="{{i.label}}"
ng-selected="viewmodel.inputDevices.indexOf(i) == viewmodel.inputDevice"
>{{i.label}}</option>
</select>
This way will work.
这种方式会奏效。
Fixed Demo Fiddle
固定演示 Fiddle
