zoukankan      html  css  js  c++  java
  • AngularJs 简单实现全选,多选操作(转)

    代码如下:

    HTML:

    <section>
           <pre>{{choseArr}}</pre>
          全选: <input type="checkbox" ng-model="master" ng-click="all(master,tesarry)">
           <div ng-repeat="z in tesarry">
               <input id={{z}} type="checkbox"  ng-model="x" ng-checked="master" ng-click="chk(z,x)">{{z}}
           </div>
           <a href="#" class="btn btn-danger" ng-click="delete()" > 删除</a>
       </section>
    

    页面效果如下:(CSS采用bootstrap)

    js代码

    var app = angular.module('app', []);
    app.controller('MainCtrl',
    function($scope, $http, $timeout) {
        $scope.tesarry = [1, 2, 3, 4, 5]; //初始化数据
        $scope.choseArr = []; //定义数组用于存放前端显示
        var str = ""; //
        var len = $scope.tesarry.length; //初始化数据長度
        var flag = ''; //是否点击了全选,是为a
        $scope.x = false; //默认未选中
        $scope.all = function(c, v) { //全选
            if (c == true) {
                $scope.x = true;
                $scope.choseArr = angular.copy(v);
                flag = 'a';
            } else {
                $scope.x = false;
                $scope.choseArr = [];
                flag = 'b';
            }
        };
        $scope.chk = function(z, x) { //单选或者多选
            if (x == true) { //选中
                $scope.choseArr.push(z) flag = 'c'
                if ($scope.choseArr.length == len) {
                    $scope.master = true
                }
            } else {
    
                $scope.choseArr.splice($scope.choseArr.indexOf(z), 1); //取消选中
            }
            if ($scope.choseArr.length == 0) {
                $scope.master = false
            };
        };
        $scope.delete = function() { // 操作CURD
            if ($scope.choseArr[0] == "" || $scope.choseArr.length == 0) { //没有选择一个的时候提示
                alert("请至少选中一条数据在操作!") return;
            };
    
            for (var i = 0; i < $scope.choseArr.length; i++) {
                alert($scope.choseArr[i]);
    
                console.log($scope.choseArr[i]); //遍历选中的id
            }
    
        }; //delete end
    });
    

      

  • 相关阅读:
    06HTML和CSS知识点总结(六)
    05HTML和CSS知识点总结(五)
    webpack警告解除(WARNING in configuration The 'mode' option has not been set)
    如何Altium Designer AD输出元件清单及按照不同数值分类
    M57962
    艾科 驱动电路分析
    矢量旋度的散度恒为零
    迟滞比较器
    与非门SR锁存器
    寄存器与锁存器的区别
  • 原文地址:https://www.cnblogs.com/Andrew520/p/10682211.html
Copyright © 2011-2022 走看看