• 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
    });
    

      

  • 相关阅读:
    《原则》读书笔记
    mvn + testng + allure 生成自动化测试报告
    poj3264RMQ
    poj3928pingpong区间和
    uva11361数位dp
    Poj2795Exploring PyramidsDp
    uva11137Dp
    uva11375Dp
    三道组合题
    poj1379模拟退火
  • 原文地址:https://www.cnblogs.com/Andrew520/p/10682211.html
Copyright © 2020-2023  润新知