Question

我想通过下拉菜单将过滤条件传递到ol

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}">

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

Answer 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>

更新如果您希望将其放置在控制器中，则它会稍有不同，因为filter方法将为每个项目调用，并期望一个布尔结果（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>

Answer 2

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

Answer 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}">

AngularJS：动态通过过滤条件

3 个答案: