AngularJS 选择 - 在控制器中设置 ng-model 不会更新所选值答案

【问题标题】：AngularJS Selection - setting ng-model in controller does not update selected valueAngularJS 选择 - 在控制器中设置 ng-model 不会更新所选值
【发布时间】：2014-01-10 23:08:28
【问题描述】：

我在升级选择中的 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>

还有如下代码：

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'
        };
    };
}

您可以使用以下JSFiddle

我想要做的是在 inputDevice 中放入与集合 inputDevices 中第一个设备相同的值。
我知道我可以通过 elem1 并且它会起作用，但是我不能这样做，因为我想将选择保存在本地存储中，而不是将其恢复到 ng-model 对象。
任何建议将不胜感激
谢谢

【问题讨论】：

标签： javascript angularjs user-interface data-binding local-storage

【解决方案1】：

您可以像 Maxim 演示的那样存储值而不是对象，或者您可以从 inputDevices 数组中提取正确的值，例如：

self.inputDevice = self.inputDevices.filter(function(item) {
   return item.value == storedValue.value;
})[0];

根据an updated fiddle

【讨论】：

【解决方案2】：

原始问题中的代码对我有用：

<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>

毫无疑问，您的 js 代码可以正常工作，但可以更轻松地构建视图模型：

function Ctrl($scope) {
 // view model
  $scope.viewmodel = {inputDevices: [
                      {value: '1', label: 'input1'}, 
                      {value: '2', label: 'input2'}
                    ]};
  $scope.viewmodel.inputDevice = $scope.viewmodel.inputDevices[0];

}

jsfiddle http://jsfiddle.net/8t2Ln/39/

【讨论】：

【解决方案3】：

改为：

self.inputDevice = {
            value: '1',
            label: 'input1'
        };

我只存储索引：

 self.inputDevice = 0; // or 1 - second item

和：

    <select> 
        <option ng-repeat="i in viewmodel.inputDevices" 
                value="{{i.label}}" 
                ng-selected="viewmodel.inputDevices.indexOf(i) == viewmodel.inputDevice"
        >{{i.label}}</option>
    </select>

这种方法行得通。

固定演示Fiddle

【讨论】：

感谢您的回答，它很有帮助，但它不太适合我的需要，因为我需要保存所有对象并依赖其键而不是索引，因为 inputDevices 集合是动态更改的。跨度>