是的，最好有一个我已经制定的自定义指令，如果将来如果您想使用多个复选框并需要收集所有收集的项目，您可以使用如下所示的自定义指令。这里有一个link 说明如何使用它。
以下是 HTML 中的示例代码 sn-p
<body ng-app="mainApp" ng-controller="MainCtrl">
<h1>Multi Check box</h1>
<multi-checkbox selectedlist="req.selectedList" orginallist="req.sourceList" value="code" label="desc" all="true" sort-by="desc"></multi-checkbox>
<pre ng-cloak>{{req.selectedList |json}}</pre>
</body>
这需要一个源列表（orginallist）和一个目标列表（selectedlist），选择的值应该放在哪里，它还会根据您的需要对列表进行排序。
只需在你的 JS 文件中添加这个指令，你就可以随时随地使用这个指令，这是一个一次性的活动。所以我希望这对你有帮助。
mainApp.directive('multiCheckbox', ['$log', '$filter', '$timeout', function($log, $filter, $timeout) {
return {
restrict: 'EA',//E-element & A - attribute
template:
'<div> <div ng-show="checkbox.showAll" class="checkbox"> ' +
'<label style="font-size: 12px"> <input type="checkbox" ' +
'id="all" name="all" ng-model="checkbox.all" ' +
'ng-checked="checkbox.all" ng-change="selectAll()" /> All ' +
'</label> ' +
'</div>' +
'<div ng-repeat="item in list track by $index "class="checkbox"> ' +
'<label style="font-size: 12px"> <input type="checkbox" ' +
'id="{{item.value}}" name="{{item.label}}" ' +
'ng-checked="item.checked" ng-click="$parent.toggle($index)"/> {{item.label}}' +
'</label>' +
'</div> </div>',
replace: true, //to replace our custom template in place of tag <multi-checkbox>
transclude: false,//make it true if we want to insert anything btw directive tags
scope: { //isolate scope created
selectedlist: '=',
orginallist: '=',
value: '@',
label: '@',
all: '@',
sortBy: '@'
},
link: function($scope, element, attrs) {
$scope.checkbox = {};
$scope.checkbox.all = false; //set 'All' checkbox to false
$scope.checkbox.showAll = $scope.all == 'true' ? true : false;//to show/hide 'All' checkbox
//function called on click of check box
$scope.toggle = function(index) {
var item = $scope.list[index];
var i = $scope.selectedlist.length > 0 ? $scope.selectedlist.indexOf(item.value) : -1;
item.checked = !item.checked;
if (!item.checked) {
$scope.selectedlist.splice(i, 1);//remove item if unchecked
$scope.checkbox.all = false;//make 'All' to uncheck too
} else if (item.checked) {
$scope.selectedlist.push(item.value);//add item if checked
}
};
//function called when 'All' checkbox is checked
$scope.selectAll = function() {
var totalList = $scope.list;
$scope.selectedlist = [];
//if selected add all items
//if unchecked remove all items from selected list
angular.forEach(totalList, function(item) {
item.checked = $scope.checkbox.all;
if (item.checked) {
$scope.selectedlist.push(item.value);
} else {
$scope.selectedlist = [];
}
});
};
//always watch my source list if it has been modified and update back..
$scope.$watch('orginallist', function(value) {
//sort accordingly..
value = $filter('orderBy')(value, $scope.sortBy);
$scope.list = [];
if (angular.isArray(value)) {
angular.forEach(value, function(item) {
$scope.list.push({
value: item[$scope.value],
label: item[$scope.label],
checked: item.checked
});
});
}
}, true);
//clear 'All' checkbox value if all items are de selected
$scope.$watch('selectedlist', function(value) {
if (!angular.isArray(value) || (angular.isArray(value) && value.length <= 0)) {
$scope.checkbox.all = false;
}
}, true);
}
};
}]);