angularjscheckbox全选_angularjs实现 checkbox全选、反选的思考

之前做了一周的打酱油测试，其实感觉其实测试也是上辈子折翼的天使。

好长时间没写代码，感觉好多都不会了。

感谢这周没有单休，我能看熬夜看奥运了。我能有时间出去看个电影，我能有时间出去逛个商城，我能有时间在家憋一篇博文，顺便在家加班写项目的东西。

不加班万岁万岁！！！(求领导看到！哈哈)

然后说正题吧！！！

中国队加油！中国队加油！！！

好吧 真的是正题！！！

需求

1 还有个总的checkbox 负责全选和反选

2 当每一项开头都选中checkbox的时候，上面的全选自动选上

3 当全选后，取消其中一项的checkbox,全选取消

实践

我表示刚开始我是不会的！！！

思路1 上网查找demo

然后开始查资料

发现个不错的网上案例like this > demo

感觉非常符合我的需求，但是看到demo。

缺点： 没玩几下就发现无法符合需求2、3。但是貌似1 是可以实现的。

思路2 ng-checked

开始查了下checkbox在angularjs里面的用法和ng-checked,发现如果用了ng-checked 目测可以实现

html

全选

• {{i.id}}

js

var app = angular.module('myApp',[]);

app.controller('myController', ['$scope', function ($scope) {

$scope.list = [

{'id': 101},

{'id': 102},

{'id': 103},

{'id': 104},

{'id': 105},

{'id': 106},

{'id': 107}

];

$scope.m = [];

$scope.checked = [];

$scope.selectAll = function () {

if($scope.select_all) {

$scope.select_one = true;

$scope.checked = [];

angular.forEach($scope.list, function (i, index) {

$scope.checked.push(i.id);

$scope.m[i.id] = true;

})

}else {

$scope.select_one = false;

$scope.checked = [];

$scope.m = [];

}

console.log($scope.checked);

};

$scope.selectOne = function (select) {

angular.forEach($scope.m , function (i, id) {

var index = $scope.checked.indexOf(id);

if(i && index === -1) {

$scope.checked.push(id);

} else if (!i && index !== -1){

$scope.checked.splice(index, 1);

};

});

if ($scope.list.length === $scope.checked.length) {

$scope.select_all = true;

} else {

$scope.select_all = false;

}

console.log($scope.checked);

}

}]);

}]);

大概意思说 如果你用了ng-checked 就是默认它最初定义就是true, 因此就没有必要使用ng-model了。简单说来就是ng-model和ng-checked不需要同时用。

看来是能用ng-click 或者 ng-change了

思路3 给数组里面每一个list 绑定checked 的属性

这个想法也是联想到公司之前的一个大牛的写的一个关于checkbox的指令。

html

全选

• {{id}}

js

var app = angular.module('myApp',[]);

app.controller('myController', ['$scope', function ($scope) {

$scope.list = [

{'id': 101},

{'id': 102},

{'id': 103},

{'id': 104},

{'id': 105},

{'id': 106},

{'id': 107}

];

$scope.m = [];

$scope.checked = [];

$scope.selectAll = function () {

if($scope.select_all) {

$scope.checked = [];

angular.forEach($scope.list, function (i) {

i.checked = true;

$scope.checked.push(i.id);

})

}else {

angular.forEach($scope.list, function (i) {

i.checked = false;

$scope.checked = [];

})

}

console.log($scope.checked);

};

$scope.selectOne = function () {

angular.forEach($scope.list , function (i) {

var index = $scope.checked.indexOf(i.id);

if(i.checked && index === -1) {

$scope.checked.push(i.id);

} else if (!i.checked && index !== -1){

$scope.checked.splice(index, 1);

};

})

if ($scope.list.length === $scope.checked.length) {

$scope.select_all = true;

} else {

$scope.select_all = false;

}

console.log($scope.checked);

}

}]);

推荐第三种方法！以上

参考