AngularJS 的全选、反选实现

最新推荐文章于 2019-12-02 14:09:16 发布

weixin_30414245

最新推荐文章于 2019-12-02 14:09:16 发布

阅读量325

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jtznenic/p/11434124.html

版权

AngularJS 的全选、反选实现

AngularJS 的全选、反选实现

一、需求

要使用 AngularJS 实现 checkbox 的全选、反选。
其中所有项都选中，则全选的 checkbox 也选中。
有一项没有选中，全选的 checkbox 不选中。
点击反选按钮，所有项反选，全选的checkbox 视情况而定，如果再所有项都没有选中的情况下反选等同于全选。

二、思路

需要获取全选 checkobx 的选中状态。
需要获取每个项 checkbox 的状态。
需要获取所有选中的 checkbox 的ng-model。
需要获取所有选项的数量。（用于和 3 进行比较，来判断是否全部选中）
需要获取反选按钮的状态，然后所有选中的 checkbox 的 ng-model 置反。

三、实现

index.html

<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8" />
     <title>全选与反选Demo</title>
     <script src="js/angular.min.js"></script>
     <script src="js/index.js"></script>
 </head>
 <body ng-app="demo" ng-controller="indexController" >
     <ul>
         <li><input type="checkbox" ng-model="sellect_all" ng-click="selectAll($event, list)">全选 <input type="button" ng-model="invert_all" ng-click="invertAll($event, list)" value="反选"></li>
         <li ng-repeat="entity in list">
             <input type="checkbox" ng-model="select_one[entity.id]" ng-click="selectOne($event,entity.id, list)">{{entity.value}}
         </li>
     </ul>
 </body>
</html>

index.js

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

app.controller("indexController",function($scope){
 // 自定义数据列表
 $scope.list = [{"id": "1","value": "a"},{"id": "2","value": "b"},
                 {"id": "3","value": "c"},{"id": "4","value": "d"},
                 {"id": "5","value": "e"}];

 $scope.selectIds=[];// 选中的ID集合 
 $scope.select_one=[]; // 单项是否选中状态集合，以 [{"1":true}...] 的方式存在，实际开发中，id 可能不是数字
 $scope.sellect_all = false; // 全选按钮是否选中
 $scope.invert_all = false; // 反选按钮是否选中

 // 全选功能
 $scope.selectAll = function($event, list) {
     // 因为绑定的 sellect_all 有滞后，所以让其等于 $event.target.checked
     $scope.sellect_all = $event.target.checked;

     if ($scope.sellect_all) {
         angular.forEach(list, function(value) {
             $scope.selectIds.push(value.id);
             $scope.select_one[value.id] = true;
         })
     } else {
         // 实现全不选功能
         $scope.selectIds=[];
         $scope.select_one=[];
     }
 }

 // 反选功能
 $scope.invertAll = function($event, list) {
     $scope.invert_all = $event.target.checked;
     // 实现反选功能
     $scope.selectIds=[];
     angular.forEach(list, function(value) {
         $scope.select_one[value.id] = !$scope.select_one[value.id];
         if ($scope.select_one[value.id]) {
             $scope.selectIds.push(value.id);
         }
     })
     checkAll();
 }

 // 单项checkbox选择功能
 $scope.selectOne = function($event, id, list) {     
     if($event.target.checked){//如果是被选中,则增加到数组
         $scope.selectIds.push( id);         
     }else{
         var idx = $scope.selectIds.indexOf(id);
           $scope.selectIds.splice(idx, 1);//删除 
     }
     checkAll();
 }

 // 检查是否全选
 checkAll = function() {
     // 如果按钮已全部被选，就使全选按钮选中，之所以进行非0判断，是考虑到了在实际环境中数据是服务器响应的。
     if ($scope.selectIds.length != 0 && $scope.list.length == $scope.selectIds.length) {
         $scope.sellect_all = true;
     } else {
         // 如果有的按钮没有被选中，就取消全选
          $scope.sellect_all = false;
     }
 } 
});

实现效果

转载于:https://www.cnblogs.com/jtznenic/p/11434124.html

weixin_30414245

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 的全选、反选实现

目录 AngularJS 的全选、反选实现一、需求二、思路三、实现 AngularJS 的全选、反选实现一、需求要使用 AngularJS 实现 checkbox 的全选、反选。其中所有项都选中，则全选的 checkbox ...
复制链接

扫一扫