角遍历表行并检查已选中的复选框 [英] Angular loop through table row and check for checked checbox

问题描述

我有一个表，该表具有数据库列表，每行都有一个复选框，该复选框将用于ex.在删除记录期间.

I have a table that has a list from database with checkbox on each row, checkbox will used for ex. during deletion of the record.

所以我想要实现的是，当我单击删除按钮时，angular将循环表中的每一行并选中复选框是否选中，如果是，请继续删除.没有任何想法如何做到这一点.有人请举一些相关的例子.

So what i am trying to achieve is that when i clicked the delete button, angular will loop each row in table and check the checkbox whether is checked, if yes the please proceed to delete. Dont have any idea how to do this. Someone please give some related example.

这是我的代码

index.html

<button class="ui red labeled icon button right floated" type="button" data-content="Delete selected item(s)" id="delete" ng-click="deleteSeleted()"><i class="trash icon"></i>Delete</button>
<div class='container-table'>
 <table class="ui fixed single line celled table striped sortable compact" style="width:2000px" id="mytable">
   <thead>
     <tr>
       <th class="width-checkbox"><input type="checkbox" ng-model="matin.selectedAll" /></th>
       <th class="width-120">Item</th>
     </tr>
   </thead>
   <tbody>
     <tr ng-repeat="x in data">
       <td><input type="checkbox" ng-checked="matin.selectedAll"></td>
       <td>{{x.item}}</td>
     </tr>
   </tbody>
 </table>
</div>

推荐答案

请找到我创建的提琴手链接，以选择表中的所有项目并在删除打印时进行检查

Please find the fiddler link which i have created to select all the items in the table and on delete print which ever is checked https://jsfiddle.net/dfL1L944/3/

var appModule = angular.module('Module', []);
appModule.controller("DataController", function($scope) {
  $scope.data = [{"name":"Alex"},{"name":"Juni"}]
  $scope.deleteAll = false;

    $scope.deleteSeleted = function(){
    $scope.data.forEach(function(x) {
        console.log(x.name);
    });
  }

  $scope.selectedAll = function(){
    $scope.data.forEach(function(x) {
          if($scope.deleteAll){
            x.deleted = true;
        }
              else{
            x.deleted = false;
        }
            });
  }

});

HTML代码

<div ng-app="Module"> <div ng-controller="DataController">


<button class="ui red labeled icon button right floated" type="button" data-content="Delete selected item(s)" id="delete" ng-click="deleteSeleted()"> <i class="trash icon"></i>Delete</button> <div class='container-table'>  <table class="ui fixed single line celled table striped sortable compact" style="width:200px" id="mytable">    <thead>
     <tr>
       <th width="20px">
       <input type="checkbox" ng-model="deleteAll" ng-click="selectedAll()" /></th>
       <th>Item</th>
     </tr>    </thead>    <tbody>
     <tr ng-repeat="x in data">
       <td width="2px"><input type="checkbox" ng-checked="x.deleted"></td>
       <td>{{x.name}}</td>
     </tr>    </tbody>  </table> </div>

</div> </div>

这篇关于角遍历表行并检查已选中的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！