AngularJS：动态传递过滤条件

Question

我想通过下拉菜单将我的过滤条件传递给 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);
};

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

Answer 1

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

Answer 2

您需要将选择的值传递给 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}">

Answer 3

您可能已经想到了这一点，但这里有一种方法可以编写自定义过滤器，然后使用它来过滤您的用户列表。自定义过滤器应该 return 一个将集合作为第一个参数并将过滤条件作为第二个参数的函数（如果您想传递多个过滤条件，可以添加其他参数）。此示例使用您传入的集合的内置 .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>

AngularJS：动态传递过滤条件

AngularJS: Pass Filter conditions dynamically

angularjs

angularjs-filter