Angular选选中和取消全选中效果

最新推荐文章于 2021-10-20 17:55:22 发布

chijiang1747

最新推荐文章于 2021-10-20 17:55:22 发布

阅读量597

点赞数 1

文章标签： javascript 前端 ViewUI

原文链接：https://my.oschina.net/chengwei426/blog/1093879

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <script src="jquery-1.9.1.min.js"></script>
    <script src="angular.min.js"></script>
    <script>
        var app = angular.module("myApp", []);
        app.controller('myCtrl', ['$scope', function ($scope) {
            //在对象为进来后加一个isSelected
            $scope.list = [
                {name:'Golde',birthday:'2000-01-10',isSelected:false},
                {name:'King',birthday:'1990-01-10', isSelected:false},
                {name:'Mark',birthday:'19890-01-10',isSelected:false},
                {name:'Marie',birthday:'2010-01-10',isSelected:false}
            ];

            $scope.checkStatus = function(){
                var str = '';
                angular.forEach($scope.list,function(value,key){
                    if(value.isSelected){
                        str += value.name+"被选中了\n";
                    }
                });

                if(str === ''){
                    str = '都未选中';
                }
                alert(str);
            };

            // 对于对象进行操作的时候(点击)，会执行funcChange
            //判断对象数组中isSelected 是否为 true或false，在决定select是否为true
            $scope.selectAll = false;
            $scope.changeAll = function(){//全选/取消全选
                if($scope.selectAll==false){
                    $scope.selectAll=true;
                }else{
                    $scope.selectAll=false;
                }

                angular.forEach($scope.list,function(v,k){
                    v.isSelected = $scope.selectAll;
                })
            };

            $scope.select = false;
            $scope.funcChange = function(){// 当所有都选中时
                if($scope.select==false){
                    $scope.select=true;
                }else{
                    $scope.select=false;
                }
               
                angular.forEach($scope.list,function(v,k){
                    $scope.select = $scope.select && v.isSelected;
                });
            };

        }]);
    </script>
</head>
<body ng-app="myApp">
<div ng-controller = 'myCtrl'>
    <button ng-click="checkStatus()">查看</button>
    <input type = "checkbox" ng-model="selectAll" ng-checked="selectAll" ng-click="changeAll()"/>全选/取消全选 <br/>
    <table width="50%" class="table table-hover">
        <thead>
            <tr>
                <th>请选择</th>
                <th>姓名</th>
                <th>生日</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="obj in list">
                <td>
                    &nbsp;<input type = "checkbox" ng-model="obj.isSelected"  ng-checked="select" ng-click="funcChange()"/>
                </td>
                <td>{{obj.name}}</td>
                <td>{{obj.birthday}}</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

转载于:https://my.oschina.net/chengwei426/blog/1093879

chijiang1747

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular选选中和取消全选中效果

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link href="boots...
复制链接

扫一扫