用angular实现多选按钮的全选与反选实例代码

在页面中我们常常会遇到多选框，例如购物车里的商品

下面用angular来实现这一功能

<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title></title> 
  <script src="js/angular.min.js"></script> 
</head> 
<body ng-app="select" ng-controller="moreSel"> 
 
全选: <input type="checkbox" ng-checked="checks" ng-click="checks = !checks; all(checks)"> 
<!--track by $index去掉也可以--> 
<div ng-repeat="item in datas track by $index"> 
<input type="checkbox" ng-checked="chkItem[$index]" ng-click="ck(chkItem[$index]==undefind?false:chkItem[$index], item, $index)">{{ item }} 
</div> 
<pre>{{arr}}</pre> 
</body> 
 
<script> 
  //创建模块 
  angular.module("select", []) 
      //控制器 
      .controller("moreSel", function ($scope) { 
        $scope.datas = ["C++","Html","Javascript"]; 
        $scope.arr = [];//用来显示选中的内容 
        //用来标志每一项的状态 
        $scope.chkItem = []; 
 
        //全选 
        $scope.all = function (checks) { 
          //初始化设置状态 
          init(checks); 
          //将选中的内容赋值到数组中 
          if(checks) { 
            for(var i = 0; i < $scope.datas.length; i++) { 
              $scope.arr[i] = $scope.datas[i]; 
            } 
          }else { 
            $scope.arr = []; 
          } 
        } 
 
        //点击选择 
        $scope.ck = function (state, item, index) { 
          //取状态的相反值 
          $scope.chkItem[index] = !state; 
          //有一个为false则全选按钮为不选中 
          if(!$scope.chkItem[index]){ 
            $scope.checks = false; 
 
            //取消选中，将数值从arr数组中删除掉 
            var num = $scope.arr.indexOf(item); 
            $scope.arr.splice(num, 1); 
          }else { 
            //选中追加进去 
            $scope.arr.push(item); 
            for(var i = 0; i < $scope.datas.length; i++) { 
              //只要有一个按钮没有选中 
              if(!$scope.chkItem[i]){ 
                return; 
              } 
            } 
            //全部选中 
            $scope.checks = true; 
          } 
        } 
 
        //初始化 
        var init = function (sel) { 
          for(var i = 0; i < $scope.datas.length; i++) { 
            //sel没有值 默认初始化false 
            $scope.chkItem[i] = sel || false; 
          } 
        } 
      }); 
</script> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# angularjs # 全选和反选 # angularjs全选反选 # 实现全选 # AngularJS实现按钮提示与点击变色效果 # 用AngularJS来实现监察表单按钮的禁用效果 # ionic+AngularJs实现获取验证码倒计时按钮 # 使用AngularJS2中的指令实现按钮的切换效果 # Angular2搜索和重置按钮过场动画 # AngularJS 实现点击按钮获取验证码功能实例代码 # Angular.js实现获取验证码倒计时60秒按钮的简单方法 # 使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解 # Angular实现点击按钮后在上方显示输入内容的方法 # 全选 # 组中 # 这一 # 来实现 # 车里 # 常常会 # 大家多多 # 多选 # 有一个 # 每一项 # 删除掉 # 只要有 # UTF # script # title # en # lang # charset # meta # src

返回目录在线咨询

上一篇：优化CodeIgniter验证错误消息：消除多余空白字符的实践
下一篇：网站无法访问？教你快速排查常见原因

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

用angular实现多选按钮的全选与反选实例代码

您的项目需求