在 Angular 中选中过滤复选框

Question

我有一个用户列表，其存在用复选框标记

<input type="checkbox" data-ng-checked="{{user.presence}}">

我想创建一种方法来在列表中显示选中复选框的用户，在 select 中选择“present”选项，并通过选择“absent”选项在列表中选择未选中复选框的用户选择。

我该怎么做？

在这里查看我的代码：https://codepen.io/anon/pen/wPzNEb

Answer 1

您的代码存在许多问题。首先，您没有在任何地方保存选择值，所以我将它添加到模型中。我从默认选项中删除了“默认”以检查此清洁剂。我创建了一个过滤器并使用它来过滤您的列表。请参阅下面更新的 codepen。

https://codepen.io/anon/pen/dZpLbb

html

<select ng-model="selectOption">
    <option value="" selected>
        Select an option
    </option>
    <option value="present">
        Present
    </option>
    <option value="absent">
        Absent
    </option>
</select>
....
<tr data-ng-repeat="user in id | filterByPresence:selectOption">
    ....
</tr>

app.js

app.filter('filterByPresence', function (){
  return function( users, selectOption ) {
      console.log('filterByPresence', selectOption);
      var filtered = [];
      angular.forEach(users, function(user) {
        if (!selectOption) {
          filtered.push(user);
        } else if (selectOption == 'present' && user.presence) {
          filtered.push(user);
        } else if (selectOption == 'absent' && !user.presence) {
          filtered.push(user);
        }
      });

      return filtered;
    };
})