用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>

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

赞 (0)

相关推荐

  • AngularJS实现全选反选功能

    AngularJS实现全选反选功能

    AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: <!DOCTYPE html> <html lang="en&quo

  • AngularJS 购物车全选/取消全选功能的实现方法

    AngularJS 购物车全选/取消全选功能的实现方法

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中列表中的所有checkbox,全选也会被勾选:(这里我想到的方法是给每一个对象增加checked字段,然后勾选触发echoChange()函数,用了一个cc变量计算当前checked为true的个数,然后再判断被勾选个数与数组长度是否相等,相等则证明全部被勾选,于是全选按钮也赋值为true;不知道还

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

    在页面中我们常常会遇到多选框,例如购物车里的商品 下面用angular来实现这一功能 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> </head>

  • jquery操作checkbox实现全选和取消全选

    今天这样写了一个全选和取消全选的功能: 全选:$(":checkbox").attr("checked","checked"); 取消全选:$(":checkbox").removeAttr("checked"); 获取选中的:$(":checked[checked='checked']") 发现点全选可以,在点取消全选也可以,获取选中的失效,接下来再点任何按钮都没有效果了 这样行不通,

  • js实现复选框的全选和取消全选效果

    在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此功能,代码实例如下: 以下是代码: <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://hovertree.com/" /> <titl

  • vue 实现搜索的结果页面支持全选与取消全选功能

    演示地址,打开.搜索.随便点 http://msisliao.github.io/dem... npm i element-ui -S // main.js import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) demo功能概览 默认没有全选,搜索时支持全选与取消全选, 将选择的数据添加到已选中,已选删除时改变当前搜索列表的状态与全选按钮的状态 全选时

  • 微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

    实现的效果就是: 1.点击全选选中所有商品,再点击全选,取消勾选 2.在选中的同时获取需要的商品id,获取后是以字符串拼接的形式 拼成一个字符串 3.点击删除按钮时删除选中的商品 点击全选 再次点击全选框 wxml关键代码 重要代码 value="{{item.goods_id}}" -->checkbox被选中的值就是这个goods_id checked="{{item.checked}}" -->checked代表选中与否 ,ture选中,false

  • JS实现表单全选以及取消全选实例

    JS实现表单全选以及取消全选实例

    本文实例为大家分享了JS实现表单全选以及取消全选的具体代码,供大家参考,具体内容如下 实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 checked属性(选中状态)跟随全选按钮即可 使用 this.checked 可以获得当前复选框的状态,如果是true就代表被选中,如果是false就代表没被选中. 注:<input>的 checked 属性是一个布尔

  • 基于JavaScript实现复选框的全选和取消全选

    基于JavaScript实现复选框的全选和取消全选

    本文实例为大家分享了js复选框的全选和取消全选的具体代码,供大家参考,具体内容如下 效果图: 测试代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> li{list-style: none;} </style> </head>

  • Javascript实现CheckBox的全选与取消全选的代码

    Javascript实现CheckBox的全选与取消全选的代码

    本文介绍的方法,触发条件独立,可以全选或取消全选指定 name 的 CheckBox , 同一页面可以有多组供全选的 CheckBox ,功能健全,通用性较强. 效果图:运行查看效果: function checkAll(name) { var el = document.getElementsByTagName('input'); var len = el.length; for(var i=0; i 字母全选开关 a b c d e f g 数字全选开关 1 2 3 [Ctrl+A 全选 注

  • jQuery对checkbox 复选框的全选全不选反选的操作

    jQuery对checkbox 复选框的全选全不选反选的操作

    先给大家展示下效果图,如果大家感觉还不错,请继续参考实现代码. HTML代码: <body> <ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li> <li><label><inp

  • jquery 实现复选框的全选操作实例代码

    jquery 实现复选框的全选操作实例代码 最近做了个需求,需要实现列表复选框的全选/取消全选操作,由于之前对这块不是很了解,所以从网上查了一些资料,虽然有各种实现方法,但没找到直接可以套用的.自己琢磨了下,把功能实现,整理如下. 实现细节如有可改进的地方,不吝赐教. 首先是html部分的代码,这里有一个表格,表格里面有一些选项: <div id="list"> <table> <tr><td>选项1<input type=&quo

随机推荐