angular中表格的全选，单选的互相控制

最新推荐文章于 2021-10-30 20:01:07 发布

weixin_39407291

最新推荐文章于 2021-10-30 20:01:07 发布

阅读量740

点赞数

CC 4.0 BY-SA版权

分类专栏： angularJS

本文链接：https://blog.youkuaiyun.com/weixin_39407291/article/details/96346231

angularJS 专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何在Angular应用中实现表格的全选和单选功能，并实现它们之间的相互控制。通过示例代码展示具体的逻辑操作。

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

直接上代码：
结构：

 <table id="" class="table table-bordered hover text-center newsClassifyTable" cellspacing="0" width="100%" role="grid" >
         <thead>
             <tr role="row">
                 <th class="text-center">
                     <label class="i-checks m-b-none">
                         <input type="checkbox"  ng-model="all" ng-change="allSelect()"><i></i>
                     </label>
                 </th>
                 <th>底价货号</th>
                 <th>供应商</th>
                 <th>仓库</th>
             </tr>
         </thead>
         <tbody>
             <tr ng-show="floorPriceTable.length == 0">
                 <td colspan="21">无数据</td>
             </tr>
             <tr ng-repeat="list in floorPriceTable"  ng-show="floorPriceTable.length > 0">
                     <td>
                         <label class="i-checks m-b-none">
                             <input type="checkbox" ng-model="list.selectedStatus" ng-change="listSelect(list.id)"><i></i>
                         </label>
                     </td>
                     <td>{{list.id}}</td>
                     <td>{{list.supplierName}}</td>
                     <td>{{list.storeName}}</td>
             </tr>
         </tbody>
</table>

逻辑

//勾选
    $scope.allSelect = function () {
      if($scope.all){
          $scope.floorPriceTable.forEach(function (value) {
              value.selectedStatus = true;
          });
      }else{
          $scope.floorPriceTable.forEach(function (value) {
              value.selectedStatus = false;
          });
        }
    };
    $scope.listSelect = function (param) {
        if(param.selectedStatus){
            $scope.all = true;
            $scope.floorPriceTable.forEach(function (value) {
                if(!value.selectedStatus){
                  $scope.all = false
                }
            });
        }else{
          $scope.all = false
        }
         
    }
    //勾选了哪些货品
    $scope.selectResult = function(){
       console.log($scope.floorPriceTable)
        var idList = [];
         $scope.floorPriceTable.forEach(function(value){
            if(value.selectedStatus){
              idList.push(value.id);
            }
         })
         console.log(idList)
         return idList 
    }