如何使用Angularjs的ng-repeat復選框過濾表格

Question

曾幾何時，這是有效的，但不知怎的，它已經壞了。 我希望能夠使用ng-repeat生成復選框，以根據存儲的數據獲取所需數量的復選框，並使用這些復選框來篩選生成的表格。

另外，我不希望重復復選框的相同值。

我用代碼制作了一個plnkr。

<div class="row">
    <label data-ng-repeat="x in projects">
        <input
        type="checkbox"
        data-ng-true-value="{{x.b}}"
        data-ng-false-value=''
        ng-model="quer[queryBy]" />
        {{x.b}}
    </label>
</div>

http://plnkr.co/edit/RBjSNweUskAtLUH3Ss6r?p=preview

所以總結一下。

1. 復選框以過濾Ref 。

2. 復選框是唯一的。

3. 使用Ref 。基於ng-repeat制作復選框。

Answer 1

ng-false-value指令需要一個值集。 嘗試ng-false-value='false'或ng-false-value='null' （事實上​​，如果它只是一個假值而不是具體的東西，比如字符串或某個數字，你可以完全跳過這個） 。

正如您在評論中指出的那樣，在選中然后清除復選框后，所有行都會被過濾掉。 這是因為取消選中該復選框會將其值設置為false，這與您的實體的值不一致（您可能知道，只是為其他人說明）。

因此，您需要在最后將此值設置為空字符串。 那是這樣的：

$scope.$watch('quer.$', function () {
  if ($scope.quer.$ === false) {
    $scope.quer.$ = '';
  }
});

Answer 2

好的，這是怎么做的。

首先，讓我們添加幾行CSS，以確保所有復選框都可見：

<style>
  .row { margin-left: 0px }
  input[type=checkbox] { margin-left: 30px; }
</style>

接下來，將以下行添加到您的控制器：

app.filter('unique', function() {

  return function (arr, field) {
    var o = {}, i, l = arr.length, r = [];
    for(i=0; i<l;i+=1) {
      o[arr[i][field]] = arr[i];
    }
    for(i in o) {
      r.push(o[i]);
    }
    return r;
  };
})

  app.controller("maincontroller",function($scope){
    $scope.query = {};
    $scope.quer = {};
    $scope.queryBy = '$';
    $scope.isCollapsed = true;
    $scope.selectedRefs = [];

  $scope.myFilter = function (item) { 
    var idx = $scope.selectedRefs.indexOf(item.b);
    return idx != -1; 
  };

  $scope.toggleSelection = function toggleSelection(id) {
    var idx = $scope.selectedRefs.indexOf(id);
    if (idx > -1) {
      $scope.selectedRefs.splice(idx, 1);
    }
    else {
      $scope.selectedRefs.push(id);
    }
  };

唷。

出於某種原因，您的Plunkr版本的AngularJS無法識別unique屬性，因此我在控制器中添加了一個。

最后，將你的html更改為：

<div class="row">
    <label data-ng-repeat="x in projects | unique:'b' | orderBy:'b'" >
        <input
        id="x.b"
        type="checkbox"
        ng-click="toggleSelection(x.b)"
        ng-init="selectedRefs.push(x.b)"
        ng-checked="selectedRefs.indexOf(x.b) > -1" />
        {{x.b}} 
    </label>
</div>

...和你的重復...

<tr ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:myFilter | orderBy:orderProp">

如果您有興趣了解其工作原理，請添加以下行：

<div style="margin:10px 10px 30px 10px">
  <pre>{{ selectedRefs }} </pre>
</div>

我喜歡這個技巧：你可以看到我們的“ selectedRefs ”數組的確切內容，並在我們勾選/取消選中復選框時看到它的變化。 這在開發/測試我們的綁定時非常有用！

如您所見，這些更改使用新的unique函數從project數組中獲取不同值的列表，當頁面首次加載時，我們將所有值都推送到新的“ selectedRefs ”數組中。

["123","321","456","654","789","987"] 

然后，當您勾選/取消勾選復選框時，我們會在此列表中添加/刪除該項目。

最后，我們在ng-repeat使用該過濾器。

ng-repeat-start="x in projects | filter:myFilter | orderBy:orderProp"

任務完成 ！

更新

如果您想從未選中的所有復選框開始 ，那么這是一個簡單的更改。 只需刪除此行...

ng-init="selectedRefs.push(x.b)"

..並更改myFilter函數以最初顯示所有項目..

$scope.myFilter = function (item) { 
    if ($scope.selectedRefs.length == 0)
        return true;

    var idx = $scope.selectedRefs.indexOf(item.b);
    return idx != -1; 
};

要添加一個“全部清除”按鈕，只需在表單中添加一個按鈕，調用AngularJS控制器中的函數，就像這樣。

$scope.clearAll = function () { 
    $scope.selectedRefs = [];
};

（雖然我沒有測試過這些建議。）