angularJS全選功能實現

標籤：案例   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);    }}]);

angularJS全選功能實現