angularJs 实现checkbox全选和多选

<!-----html  --->

<div ng-controller="MyCtrl">
    <table class="table">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" ng-click="selectAll($event)" ng-checked="isSelectedAll()"
                    />
                </th>
                <th>Title</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="e in entities" ng-class="getSelectedClass(e.id)">
                <td>
                    <input type="checkbox" name="selected" ng-checked="isSelected(e.id)" ng-click="updateSelection($event, e.id)"/>
                </td>
                <td>{{e.title}}</td>
            </tr>
        </tbody>
    </table>
</div>


<!---js--->

var myApp = angular.module('myApp', []);


MyCtrl = function ($scope) {
    $scope.entities = [{
        "title": "foo",
        "id": 1
    }, {
        "title": "bar",
        "id": 2
    }, {
        "title": "baz",
        "id": 3
    }];
    $scope.selected = [];
    var updateSelected = function (action, id) {
        if (action == 'add' & $scope.selected.indexOf(id) == -1) $scope.selected.push(id);
        if (action == 'remove' && $scope.selected.indexOf(id) != -1) $scope.selected.splice($scope.selected.indexOf(id), 1);
    }


    $scope.updateSelection = function ($event, id) {
        var checkbox = $event.target;
        var action = (checkbox.checked ? 'add' : 'remove');
        updateSelected(action, id);
    };


    $scope.selectAll = function ($event) {
        var checkbox = $event.target;
        var action = (checkbox.checked ? 'add' : 'remove');
        for (var i = 0; i < $scope.entities.length; i++) {
            var entity = $scope.entities[i];
            updateSelected(action, entity.id);
        }
    };


    $scope.getSelectedClass = function (entity) {
        return $scope.isSelected(entity.id) ? 'selected' : '';
    };


    $scope.isSelected = function (id) {
        return $scope.selected.indexOf(id) >= 0;
    };


    //something extra I couldn't resist adding :)
    $scope.isSelectedAll = function () {
        return $scope.selected.length === $scope.entities.length;
    };
}






//==================================方法2==============================================

//  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="isSelect" ng-checked="master"
           ng-click="chk(z,x)">{{z}}
   </div>
   <a href="#" class="btn btn-danger" ng-click="delete()"> 删除</a>
</section> 


//  js文件

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

$scope.all= function (c,v) {// 全选
if(c==true){
$scope.isSelect=true;
$scope.choseArr=v;
}else{
$scope.isSelect=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.deleted= function () {// 操作CURD
if($scope.choseArr[0]==""||$scope.choseArr.length==0){//没有选择一个的时候提示
alert("请至少选中一条数据在操作!");
return;
};
for(var i=0;i<$scope.choseArr.length;i++){
console.log($scope.choseArr[i]);//遍历选中的id
}
};


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值