Question

我有一个表格，其中包含数据库中的列表，每行都有复选框，复选框将用于ex。在删除记录期间。

所以我想要实现的是，当我点击删除按钮时，angular将循环表中的每一行并选中是否选中复选框，如果是，请继续删除。不知道怎么做。有人请举一些相关的例子。

这是我的代码

的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>

Answer 1

<tr ng-repeat="x in data">
     <td><input type="checkbox" ng-model="x.selected"></td>
     <td>{{x.item}}</td>
</tr>

Angular Js Code

for (var k = 0; k < $scope.data.length; k++)
{
     if($scope.data[k].selected==true)
      {
           //Perform your desired thing over here
          var val=$scope.data[k].item  //to getData
      }


 }

Answer 2

请找到我创建的提琴手链接，以选择表格中的所有项目以及选中的{删除打印件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>

Answer 3

例如，您可以向.toDelete数组中的每个x添加data属性，并绑定如下所示的复选框：

<input type="checkbox" ng-model="x.toDelete">

之后您可以在表格下创建一个按钮：

<input type="button" ng-click="deleteRows();" value="Delete rows">

...然后在你的控制器范围内创建一个函数（一个新手友好的函数）：

$scope.deleteRows = function(){
  var i=0;
  for(i=0; i<data.length; i++){
    if(data[i].toDelete){
      //send your server requests here and do
      //your stuff with the element if needed

      data.splice(i, 1); //remove the element from the array
      i--; //decrement the value of i so it stays the same
           //(array is now shorter than it used to be)
    }
  }
}

您还可以在同一范围内的单独数组中保留要删除的行的信息，但这个解决方案对我来说似乎更简单。

关于＆＃34;全部检查＆＃34;在顶部的复选框中，您可以创建一个函数并将其与ng-click绑定到一个按钮或任何其他元素，并使用该函数简单地遍历所有元素并将.toDelete属性设置为{{1对于他们中的每一个。

Answer 4

您可以使用$filter（您需要插入$ filter作为依赖项）

$scope.data: [ // assuming your model looks like this 
        {
          Id: "my_id",
          Name: "my_name",
          checked: true
        }
      ];

var myFilteredValues = $filter('filter')($scope.data, { $: true });

并在您的HTML中

 <tr ng-repeat="x in data">
   <td><input type="checkbox" ng-model="x.checked"></td>
   <td>{{x.Name}}</td>
 </tr>

通过表行进行角度循环并检查已检查的checbox

4 个答案: