码迷,mamicode.com
首页 > Web开发 > 详细

AngularJs 简单实现全选,多选操作

时间:2015-07-06 15:38:34      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:

很多时候我们在处理CURD(增删改查)的时候需要实现批量操作数据,这时候就必须使用多选操作。

Angular 中实现如下(当然还有很多种比笔者写的更好的方法,这里只是简单的实现。)

代码如下:

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代码:

        $scope.tesarry=[‘1‘,‘2‘,‘3‘,‘4‘,‘5‘];//初始化数据
        $scope.choseArr=[];//定义数组用于存放前端显示
        var str="";//
        var flag=‘‘;//是否点击了全选,是为a
        $scope.x=false;//默认未选中

        $scope.all= function (c,v) {//全选
            if(c==true){
                $scope.x=true;
                $scope.choseArr=v;
            }else{
                $scope.x=false;
                $scope.choseArr=[""];
            }

            flag=‘a‘;

        };
        $scope.chk= function (z,x) {//单选或者多选
            if(flag==‘a‘) {//在全选的基础上操作
                str = $scope.choseArr.join(‘,‘) + ‘,‘;
            }
            if (x == true) {//选中
                str = str + z + ‘,‘;
            } else {
                str = str.replace(z + ‘,‘, ‘‘);//取消选中
            }

            $scope.choseArr=(str.substr(0,str.length-1)).split(‘,‘);

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



        };

  以上基本实现全选,反选,多选操作

AngularJs 简单实现全选,多选操作

标签:

原文地址:http://www.cnblogs.com/wohenxion/p/4624218.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!