使用简单的复选框编辑过滤器

Question

我想创建一个选项，通过选中一个按钮来显示不活跃的用户。

这是 users 数组：

$scope.users = [
    {firstname: 'Paul', inactive: true},
    {firstname: 'Mark', inactive: false},
    {firstname: 'Maggie', inactive: false},                   
    {firstname: 'Lucy', inactive: true}
];

和 table 来显示它：

<table>
    <thead>
        <th>Firstname</th>
        <th>Activity</th>
    </thead>
    <tbody>
        <tr ng-repeat="user in users | filter: ??">
            <td>{{user.firstname}}</td>
            <td>{{user.inactive}}</td>
        </tr>
    </body>
</table>

<input type="checkbox" ng-click="showInact()">Show inactives

我正在学习 AngularJS，但我没有找到有趣的方法。你能帮我找到解决办法吗？

谢谢:)

Answer 1

最简单的方法！！您可以在点击事件上设置过滤器的值。

<tr ng-repeat="user in users | filter:filters">
    <td>{{user.firstname}}</td>
    <td>{{user.inactive}}</td>
</tr>

点击过滤器设置为复选框

<input type="checkbox" ng-click="filters.inactive = true">

首先，无论您的控制器名称是什么，您都需要设置控制器名称而不是 "myCtrl.js"。

Answer 2

就这样做：

1) 在你的控制器上：

$scope.showInactive = false;

$scope.filterInact = function(item)
{
    return item.inactive === $scope.showInactive;
};

$scope.showInact = function() {
   $scope.showInactive = !$scope.showInactive;
}

2) 设置过滤器：

 <tr ng-repeat="user in users | filter:filterInact">
    <td>{{user.firstname}}</td>
    <td>{{user.inactive}}</td>
  </tr>

Answer 3

我个人喜欢使用过滤功能来过滤数据。这种方法很灵活，可以轻松地与您的其他表单变量进行交互。从angular docs开始，过滤表达式可以是：

function(value, index): A predicate function can be used to write arbitrary filters. The function is called for each element of array. The final result is an array of those elements that the predicate returned true for.

因此，示例过滤器函数可能如下所示：

$scope.filterFunc = function (user) {
  //if the checkbox is checked show everyone, else only those that aren't inactive
  return $scope.showInactives  || !user.inactive;
};

并且 HTML 将被更改以适应过滤器功能。具体来说，我将复选框绑定到 filterFunc 函数在其逻辑中使用的 $scope 变量 ($scope.showInactives)。当然 ng-repeat 正在使用名为 filterFunc 的函数。

<input type="checkbox" ng-model="showInactives"/>Show inactive users
<br/>
<table>
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Activity</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="user in users | filter:filterFunc">
        <td>{{user.firstname}}</td>
        <td>{{user.inactive}}</td>
      </tr>
    </tbody>
</table>

如果您需要任何其他复杂的逻辑，过滤功能可以让您有很大的自由度。 return 唯一需要的是一个布尔值（真或假）。

Demo.

与过滤无关，我还必须通过将 <th> 放在 table 行 <tr> 中来修复 table 的 HTML。

使用简单的复选框编辑过滤器

Edit a filter with a simple checkbox

html-table

angularjs