Angular.js实现一键全选的功能

客官°小女子只卖身不卖艺 2022-02-15 07:43 249阅读 0赞

实现代码如下：

<head>
    <title>撸起袖子加油干</title>
    <meta charset='utf-8'>
    <script src="http://www.jq22.com/jquery/angular-1.4.6.js"></script>
    <script src="__STATIC__/js/jquery-3.3.1.min.js"></script>
    <script src="__STATIC__/js/layer/layer.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="Ctrl">
    <table border="1" width="600" height="400">
        <tr>
            <td>姓名</td>
            <td>密码</td>
            <td>头像</td>
            <td><input type="checkbox" ng-model="box" ng-click="selectAll()">
            </td>
        </tr>
        <tr ng-repeat="n in news">
            <td>{
       {n.nickname}}</td>
            <td>{
       {n.password}}}</td>
            <td>{
       {n.phone}}</td>
            <td><input type="checkbox" ng-model="n.ck" /></td>
        </tr>
    </table>
    </body>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('Ctrl', function($scope, $http) {
            $http({
                method: 'POST',
                url: "{:url('Index/ceshi')}",
                dataType: 'JSON'
            }).then(function successCallback(response) {
                $scope.news=response.data;
            }, function errorCallback(response) {
                // 请求失败执行代码
            });
            $scope.selectAll = function(){
                //选中
                if($scope.box){
                    for(var i=0;i<$scope.news.length;i++){
                        //确认状态为选中
                        $scope.news[i].ck = true;
                    }
                }else{
                    for(var i=0;i<$scope.news.length;i++){
                        //状态没选中
                        $scope.news[i].ck = false;
                    }
                }
            };
        });
    </script>
    </html>

实现效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70]

原文：[https://blog.csdn.net/qq\_42249896/article/details/85340367][https_blog.csdn.net_qq_42249896_article_details_85340367]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70]: /images/20220215/ac5d8c2b6eba427d86b955eee0b1c43f.png
[https_blog.csdn.net_qq_42249896_article_details_85340367]: https://blog.csdn.net/qq_42249896/article/details/85340367