Question

我在选择时升级我的ng模型时遇到了问题我有以下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对象。
任何建议都会感激不尽感谢

Answer 1

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

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

根据an updated fiddle

Answer 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代码代码毫无疑问，但viewmodel可以更容易构建：

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/

Answer 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

AngularJS Selection - 在控制器中设置ng-model不会更新选定的值

3 个答案: