Question

我有一个用户列表，其中的状态标有复选框

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

我想创建一种方法，在列表中显示选中复选框的用户，选择＆＃34; present＆＃34; select中的选项和未选中复选框的用户通过选择＆＃34; absent＆＃34;选择中的选项。

我该怎么做？

请在此处查看我的代码：https://codepen.io/anon/pen/wPzNEb

Answer 1

您的代码存在许多问题。首先，您没有将选择值保持在任何位置，因此我将其添加到模型中。我从默认选项中删除了'default'以检查此清理程序。我创建了一个过滤器，用它来过滤你的列表。请参阅下面更新的代码集。

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;
    };
})

在Angular

1 个答案: