标签：案例 cti 效果 app 自己的 代码 方法 else 项目
最近在做的一个项目要增加全选和反选功能，之前只做过JQ版的全选和反选。
实现效果：
1.点击全选checkbox可以切换全选和全部清空
2.点击列表中的checkbox，当全部选中时全选选中
3.在全选状态下点击列表中的checkbox将其置为非选中状态时全选checkbox也变为非选中状态
一开始看到是angular项目上面加全选以后不造如何下手。
步骤一：
然后就上网找资料，发现一个很不错的demo，结果把它放到项目中时发现它实现不了需求2和3，当时以为是自己的写法有问题，又去玩了下那个demo，发现那个demo只能实现功能1。
demo地址：demo案例
教训：以后遇到demo要先全部玩过以后再放到项目里面用。
步骤二：
然后后面又找到一个博客，这个是里面的方法可以完美实现我的需求。我采用的是方法3放到项目中进行的验证，在此把所用部分代码贴出来。到项目里面的时候根据项目实际情况替换参数即可。
博客地址：成功案例博客
成功案例：
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>
angular
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); } }]);
标签：案例 cti 效果 app 自己的 代码 方法 else 项目
原文地址：http://www.cnblogs.com/ToBeBest/p/6050201.html
