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

      

  • 相关阅读:
    linux那点事儿(六)进程管理详解(推荐)
    linux那点事儿(下)
    视图的架构刷新和绑定
    HttpHandler开发的两个重点问题
    RichTextBox控件的几点有意思的东西
    重复输入某个字符(C++,C#)
    几个博客系统点评
    怎么理解符号整数的取值范围(C++)
    为SSIS编写自定义任务项(Task)之进阶篇
    LINQ TO XML之判断不存在行则插入
  • 原文地址:https://www.cnblogs.com/Andrew520/p/10682211.html
Copyright © 2011-2022 走看看