如何在ng-repeat中创建一个选定行的数组？

Question

我在我的Angular应用程序中有一个表格。表格的每一行都有一个复选框，我想将所有选择的行推送到一个数组中。 这是我的HTML代码：

<table class="group-tbl">
  <thead>
    <td>
      <label for="select_all"><span id="select-all-btn">&#xf35f;</span></label>
      <input type="checkbox" ng-model="all" id="select_all">
    </td>
    <td>Name</td>
    <td>company</td>
    <td>Email</td>
    <td>Mobile</td>
    <td></td>
  </thead>
  <tr ng-repeat="y in subscriberDetail|filter:search | limitTo:settings.pageLimit:settings.offset">
    <td>
      <input id="{{cb+$index}}" type="checkbox" ng-checked="all" ng-model="y.check" name="group_item-select">
      <label for="{{cb+$index}}"><span></span> </label>
    </td>
    <td ng-class="{'greent': y.check}">{{y.nameFamily }}</td>
    <td ng-class="{'greent': y.check}">{{y.company }}</td>
    <td ng-class="{'greent': y.check}">{{y.email}}</td>
    <td ng-class="{'greent': y.check}">{{y.mobile}}</td>
    <td class="group-tbl__btn" ng-controller="subscriberDeleteController as subdel"><a href="#/group/detail/{{data.categoryId}}/detailView/{{y.id}}" class="btn">&#xf133;</a><a ng-show="y.usersId==usersId" href="#/group/detail/{{data.categoryId}}/editSub/{{y.id}}" class="btn" style="font-size: .8em">Edit</a>
      <button ng-show="y.usersId==usersId || y.status==1"
      class="btn" ng-value="{{y.id}}" ng-click="confirm(subscriberDetail,settings.offset+$index);getValue()" button-value="deleteId">&#xf4c4;</button>
    </td>
  </tr>
</table>

- Rwin

---

是的，替代方案可以，我尝试使用for循环，但没有成功，如果您修改答案，我可以接受。顺便说一下，谢谢。 - Rwin

我更新了我的答案，将“替代方案”放在第一位。此外，我添加了一个JsFiddle演示for循环，以展示它的工作原理。 :) - Mistalis

我还为您使用的解决方案创建了一个demo。 - Mistalis

Answer 1

通过点击更新

在您的输入框中添加ng-click：

<input type="checkbox" ng-model="y.check" ng-click="click(y)">

这是你控制器中 click() 的代码：

$scope.click = function(item) {
    if(item.check) { // Add it
        $scope.selected.push(item);
    } else { // Remove it
        var index = $scope.selected.indexOf(item);
        $scope.selected.splice(index, 1);
    }
}

=> 在 JsFiddle 上的演示 <=

---

使用for循环的另一种方法

有多种使用循环的方法。下面是一个简单的for(;;)循环的代码。

// Array for selected rows
$scope.selected = [];

// For each item in subscriberDetail
for(var i = 0; i < $scope.subscriberDetail.length; i+) {
    // Item is checked
    if($scope.subscriberDetail[i].check == true) {
        // Add it to the selected array
        $scope.selected.push($scope.subscriberDetail[i]);
    }
}

这段代码应该在选择结束时调用。否则，请查看第二个解决方案。

=> 在 JsFiddle 上的演示 <=

- Mistalis

Answer 2

虽然@Mistalis的回答已经足够，但是当你实际需要选中的项目时，你也可以使用过滤器来完成这个操作。这样你就不必跟踪一个数组或复选框何时被切换：

$scope.onSomeActionWhenYouNeedTheCheckedItems = function(){
    var checkedItems = $filter("filter")($scope.subscriberDetail, { check: true });
    // do something with the checked items
}

或者按照您的观点：

<div ng-repeat="checkedItem in checkedItems = (subscriberDetail | filter:{check:true})">
    <!-- ... -->
</div>

最后一种语法还会在您的作用域中创建变量checkedItems，因此您不必手动执行任何操作。

- devqon