demo:
html
<div ng-controller="CheckboxCtrl">
<label for="chkAll">全选:</label>
<input id="chkAll" type="checkbox" ng-model="chkall" ng-click="chkAll(chkall)"/>
<div ng-repeat="item in chkArr">
<input type="checkbox" ng-model="item.checked"/>{{item.text}}
</div>
<div>你选中的是:{{choseArr}}</div>
</div>
js
angular.module('apper',[]).controller('CheckboxCtrl',['$scope','$filter',function($scope,$filter){
$scope.chkall = false;
$scope.chkArr = [
{id: 1, text: "足球",checked: false},
{id: 2, text: "蓝球",checked: true},
{id: 3, text: "乒乓球",checked: false},
{id: 4, text: "网球",checked: false}
];
$scope.chkAll = function(checked){
angular.forEach($scope.chkArr, function(value, key){
value.checked = checked;
});
};
$scope.$watch('chkArr', function(nv, ov){
if(nv == ov){
return;
}
$scope.choseArr = [];
angular.forEach($filter('filter')(nv, {checked: true}), function(v) {
$scope.choseArr.push(v.text);
});
$scope.chkall = $scope.choseArr.length == $scope.chkArr.length;
}, true);
}]);
改变 checked的状态之后 一定要用$watch去监听 $scope.chkArr数组的变化 只要数组变化了 在重新获取变化的值