angularJS全选功能实现

Posted ~冰蝶~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularJS全选功能实现相关的知识,希望对你有一定的参考价值。

最近在做的一个项目要增加全选和反选功能,之前只做过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全选功能实现的主要内容,如果未能解决你的问题,请参考以下文章

angularjs实现checkbox的点击-全选功能-选中数据

angularjs 全选反选

AngularJs复选框全选

angularJS使用ocLazyLoad实现js延迟加载

Delphi实现DBGrid全选和反选功能

Layui table中筛选列增加 [全选,反选] 功能【转】