使用ng-repeat和复选框设置ng-model值

Question

我有一个像这样的简单数组：

$scope.otherItems = [
            "A",
            "B",
            "C",
            "D",
            "E"
        ];

我希望遍历这个数组并将值分配给复选框，如：

<label ng-repeat="o in otherItems"> {{ o }}
 <input ng-model="myform.otherItems" type="checkbox" value="{{ o }}">
</label>

现在我遇到的问题是，当我检查任何项目时，他们都被检查了！这是由于ng模型。我的所有复选框都具有ng-model的相同值。我想在提交/设置ng-model时收集个别复选框，如下所示：myform.otherItems.valueOfo，因此我得到所选复选框的对象。但是，当我尝试将ng-model设置为ng-model="myform.otherItems.o"或ng-model="myform.otherItems[o]"时，我会收到错误。我如何最好地完成我想要的？非常感谢提前。

Answer 1

您希望通过数组元素的索引来识别它。

ng-model="myform.otherItems[{{$index}}]"

目前无法尝试，但这可能有用。

Answer 2

如果您可以更改otherItems的格式，或者将值分配给新数组，则可以为列表中的每个项目分配selected变量，并使用otherItems作为模型。然后，您可以监视模型上的更改并更新myform对象。

这是一个工作小提琴：http://jsfiddle.net/YQ2qJ/1/

查看：

<div ng-app=myApp>
    <div ng-controller=myController>
        <label ng-repeat="o in otherItems">{{ o.name }}
            <input type="checkbox" ng-model="o.selected" value="{{ o.name }}">
        </label>
        <p>{{myform}}</p>
    </div>
</div>

<强>控制器：

'use strict';

angular.module('myApp', []).controller('myController', ['$scope', function($scope) {
    $scope.otherItems = [
        {name: "A",
         selected: false
        },
        {name: "B",
         selected: false
        },
        {name: "C",
         selected: false
        },
        {name: "D",
         selected: false
        },
        {name: "E",
         selected: false
        }
    ];
    $scope.myform = {};
    $scope.$watch("otherItems", function() {
        $scope.myform.otherItems = $scope.otherItems;
    });
}]);