之前做了一周的打醬油測試，其實感覺其實測試也是上輩子折翼的天使。
好長時間沒寫代碼，感覺好多都不會了。
感謝這周沒有單休，我能看熬夜看奧運了。我能有時間出去看個電影，我能有時間出去逛個商城，我能有時間在家憋一篇博文，順便在家加班寫項目的東西。
不加班萬歲萬歲！！！（求領導看到！哈哈）
然后說正題吧！！！
中國隊加油！中國隊加油！！！
好吧 真的是正題！！！
需求
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
<div ng-controller="myController">
<label for="flag">全選
<input id="flag" type="checkbox" ng-model="select_all" ng-click="selectAll()">
</label>
<ul>
<li ng-repeat="i in list">
<input type="checkbox" ng-model="m[i.id]" ng-checked = "select_one" ng-click="selectOne(m[i.id])">
<span>{{i.id}}</span>
</li>
</ul>
</div>
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);
}
}]);
}]);
缺點 參考 not-binding-to-ng-checked-for-checkboxes
大概意思說 如果你用了ng-checked 就是默認它最初定義就是true, 因此就沒有必要使用ng-model了。簡單說來就是ng-model和ng-checked不需要同時用。
看來是能用ng-click 或者 ng-change了
思路3 給數組里面每一個list 綁定checked 的屬性
這個想法也是聯想到公司之前的一個大牛的寫的一個關於checkbox的指令。
html
<div ng-controller="myController">
<label for="flag">全選
<input id="flag" type="checkbox" ng-model="select_all" ng-change="selectAll()">
</label>
<ul>
<li ng-repeat="i in list">
<input type="checkbox" ng-model="i.checked" ng-change="selectOne()">
<span>{{id}}</span>
</li>
</ul>
</div>
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);
}
}]);
推薦第三種方法！以上
參考