AngularJS：动态传递过滤条件答案

【问题标题】：AngularJS: Pass Filter conditions dynamicallyAngularJS：动态传递过滤条件
【发布时间】：2018-07-25 19:43:38
【问题描述】：

我想通过下拉菜单将过滤条件传递给ng-repeat

<select class="form-control" ng-model="currentlySelected" ng-change="DropDownChnaged()">
    <option value ="">All</option>
    <option value="| filter : {deleted_at: null}">Active</option>
    <option value="| filter : {deleted_at: '!!'}">Inactive</option>
</select>

查看

<tr ng-repeat="user in users {currentlySelected}">

控制器：

$scope.DropDownChnaged = function () {
    $scope.DropDownStatus = $scope.currentlySelected;
    alert(currentlySelected.DropDownChnaged);
};

当我手动通过设置过滤器时，它工作正常，但当我尝试动态传递时，它不起作用。

【问题讨论】：

这是又一次尝试获得your other question 的答案吗？为什么不直接编写自己的自定义过滤器并完成它？
如果我知道该怎么做，我为什么还要问问题？
在此站点中搜索angularjs custom filter。 Here is one implementation 接受多个过滤条件。您可以轻松地将其应用于您的情况。
确定 thnx.......

标签： angularjs angularjs-filter

【解决方案1】：

您可能已经想到了这一点，但您可以通过以下方式编写自定义过滤器，然后使用它来过滤您的用户列表。自定义过滤器应返回一个函数，该函数将集合作为第一个参数，将过滤条件作为第二个参数（如果您想传递多个过滤条件，可以添加其他参数）。此示例使用您传入的集合的内置.forEach。开头的检查确保集合和过滤条件都已传递给过滤器。

angular.module('app', [])
  .filter('userFilter', () => {
    return (userList, filter) => {
      if (!userList || !filter) {
        return userList;
      }
      var out = [];
      userList.forEach((user) => {
        if (filter === 'active') {
          if (user.deleted_at === null) {
            out.push(user);
          }
        } else {
          if (user.deleted_at !== null) {
            out.push(user);
          }
        }
      });
      return out;
    }
  })
  .controller('ctrl', ($scope) => {
    $scope.users = [{
      name: 'John',
      deleted_at: null
    }, {
      name: 'Terry',
      deleted_at: '1/1/2018'
    }, {
      name: 'Joan',
      deleted_at: null
    }];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select class="form-control" ng-model="currentlySelected">
    <option value="">All</option>
    <option value="active">Active</option>
    <option value="inactive">Inactive</option>
  </select>
  <div>
    <ul>
      <li ng-repeat="user in users | userFilter:currentlySelected">{{user.name}}</li>
    </ul>
  </div>
</div>

更新如果您更愿意将它放在控制器中，它会略有不同，因为过滤器方法将为每个项目调用并期望一个布尔结果（true 包含该项目，false 排除它）。以下是在控制器中编写 $scope 方法的方法：

$scope.userFilter = (filter) => {
  return (user) => {
    if(!filter) return true;
    if (filter === 'active') {
      return user.deleted_at === null;
    } else {
      return user.deleted_at !== null;
    }
  }
}

下面是您在ng-repeat 中使用它的方法：

<li ng-repeat="user in users | filter:userFilter(currentlySelected)>{{user.name}}</li>

【讨论】：

谢谢你，不幸的是仍然在为这个问题苦苦挣扎，使用你的解决方案我怎样才能把这个自定义过滤器作为我现有的控制器中的功能？
@JKLM 我已经更新了答案以展示如何在控制器中实现。

【解决方案2】：

试试这个 <tr ng-repeat="user in users | filter:currentlySelected>

【讨论】：

【解决方案3】：

您需要将选择的值传递给 ng-change 调用的函数。

试试这个：

<select class="form-control" ng-model="currentlySelected" ng-change="DropDownChnaged(currentlySelected)">
             <option value ="">All</option>
             <option value="| filter : {deleted_at: null}">Active</option>
             <option value="| filter : {deleted_at: '!!'}">Inactive</option>
</select>

在你的控制器中

$scope.DropDownChnaged = function (value) {
        $scope.DropDownStatus = value;
        alert(currentlySelected.DropDownChnaged)
};

然后在过滤器中使用'DropDownStatus'值：

<tr ng-repeat="user in users {DropDownStatus}">

【讨论】：