基于angularjs的全选和取消

最新推荐文章于 2019-04-10 11:10:00 发布

原创最新推荐文章于 2019-04-10 11:10:00 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #全选/取消全选

本文介绍了一个使用AngularJS实现的表格数据勾选状态同步功能。通过`ng-checked`和`ng-click`指令实现了单元格勾选状态与数据模型之间的绑定，并通过控制器中的函数实现了全选/取消全选及单个项勾选状态改变时的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面加载时，需要根据字段值来判断是否是勾选状态

<table >
    <thead>
    <tr>
        <th>
                 <input type="checkbox" id="all" ng-model="allCheck" ng-click="checkAll()"/>
        </th>
        <th>人名</th>
        <th>年龄</th>
       <th>时间</th>
 </tr>
    </thead>
    <tbody>
    <tr ng-repeat="p in persons">
        <input type="hidden" value={{article.id}}>
               <td><input type="checkbox" name="checkP" ng-checked="p.status==1"

                   ng-click="checkPerson(p.statusw==1)"  value={{p.id}}>
          </td>

 <td>{{article.unit}}</td>
 <td>{{p.time | date:'yyyy-MM-dd '}}</td>
 <div>

<a data-toggle="modal" data-target="#editModal" ng-click="motai(p)"> <i></i> <span>修改</span> </a> </div> <div> <a data-toggle="modal" data-target="#deleteModal"> <i></i> <span ng-click="deleteOne(p.id)">删除</span> </a> </div> </td> </tr> </tbody></table>js代码：

homeApp.controller("homeController", ["$scope", "$http", function ($scope, $http) {

$scope.allCheck = false;
//点击控制选择
 $scope.checkPerson = function (m) {

if (m === true) {
      m = false;
    }   
 if (m === false) {    
 m = true;
 var flag = 0;
 var checkbox = document.getElementsByName("checkP");
 for (var i = 0; i < checkbox.length; i++) {

if (checkbox[i].checked === true) { flag++; } } if (flag == checkbox.length) { $scope.allCheck = true; } else { $scope.allCheck = false; } }
//全选/取消全选

$scope.checkAll = function () {
    var all = document.getElementById('all');
    var allCheckBoxs = document.getElementsByName("checkP");
    for (var i = 0; i < allCheckBoxs.length; i++) {
        allCheckBoxs[i].checked = all.checked;
    }
}

}])
;

遇到一些问题进行自己的总结，