在 AngularJS 中绑定到数组的元素答案

【问题标题】：Binding to Elements of Arrays in AngularJS在 AngularJS 中绑定到数组的元素
【发布时间】：2013-09-06 21:27:30
【问题描述】：

在 AngularJS 中，我可以成功地将文本输入绑定到数组元素：

<input type="text" ng-model="foo[2]" />

这是允许的，还是只是偶然的？

当我尝试将 select 元素或复选框输入绑定到数组元素时，它们无法工作 - 即 select 元素不会更改选择时显示或绑定的值，并且复选框不会显示勾选点击。

我错过了什么吗？

更新：它在 JSFiddle 中工作：http://jsfiddle.net/azFzc/

【问题讨论】：

标签： javascript arrays angularjs data-binding

【解决方案1】：

它确实适用于选择元素

看看这个 jsfiddle http://jsfiddle.net/fStE7/

HTML

<div ng-app>
<div ng-controller="MyController">
    Select
<select ng-change="changed()" 
        ng-options="option.value as option.label for option in options" ng-model="ar[0]">
 </select>
</div>
</div>

function MyController($scope){
    $scope.options = [
        { label : "first element", value : 0 },
        { label : "second element", value : 1 },
    ]

    $scope.ar = [];
    $scope.ar[0] = 0;

    $scope.changed = function(){
         console.log($scope.ar[0]);
    }
}

【讨论】：

是的，这是我的应用程序中的一个错误，而不是我对 AngularJS 的理解。

【解决方案2】：

我修改了上面的例子以通过绑定显示非数字数组赋值。在处理更复杂的数据或数组使用密钥系统来更新和检索值时，这最有用。

https://jsfiddle.net/9obtkoa7/

HTML

<div ng-app>
<div ng-controller="MyController">
    Select
<select ng-change="changed()" 
        ng-options="option.value as option.label for option in options" ng-model="ar['SomeId']">
 </select>
</div>
</div>

function MyController($scope){
    $scope.options = [
        { label : "first element", value : '1' },
        { label : "second element", value : '2' },
    ]

    $scope.ar = [];
    $scope.ar['SomeId'] = '1';

    $scope.changed = function(){
         console.log($scope.ar['SomeId']);
    }
}

【讨论】：