javascript - 基于动态 ID 列表的 Angular 过滤器

Question

在我的 Angular 应用程序中，我想根据我已经动态生成的 ID 列表，使用 ng-repeat 过滤在下拉按钮上生成的项目。

这个列表基本上是一个数字数组，通过 $scope.$watchCollection 动态更新，例如:

$scope.selectedBPs = [1, 2]

我在上述 dropdwon 按钮上使用 ng-repeat 生成的每个项目都有一个 id 属性。我希望过滤器执行的操作是仅在 $scope.selectedBPs 包含其 ID 时才显示特定项目。

目前我的 HTML 是:

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li ng-repeat="marker in vm.markers" ng-click="progressMarkerSelected.name = marker.name;">
        <a href role="menuitem" tabindex="-1">{{marker.name}}</a>
    </li>
</ul>

所以基本上，我只希望标记在 $scope.selectedBPs.indexOf(marker.bpId) > -1(bpId 是项目的 ID)时出现。

是否可以使用过滤器来做到这一点？

如何将 $scope.selectedBPs 传递给 Angular 过滤器，以便下拉列表在列表更改时也能动态更新？

Answer 1

你可以在 Angular 中创建你自己的自定义过滤器，它可以做任何你想做的事情，语法很简单，例如:ng-repeat="marker in vm.markers | filter : myAmazingFilter"。

在此自定义过滤器中，您将收到可迭代项作为参数，因此您可以进行测试以显示或不显示。

请看下面这个例子:

var app = angular.module("app", []);

app.controller('ListCtrl', function($scope){
 
  $scope.cars = [
    {
      id: 1,
      'name': 'Mustang'
    },
    {
      id: 2,
      'name': 'Corvette'
    },
    {
      id: 3,
      'name': 'Camaro'
    },
    {
      id: 4,
      'name': 'Ford GT'
    }
  ];
  
  $scope.selectedIDs = [1,3];
  
  $scope.myCustomFilter = function(item){
    
    if ($scope.selectedIDs.indexOf(item.id) >= 0){ //Return true if item.id is Mustang or Camaro
      
      return true; //Return true to show your item in repeat
      
    }
    
    return false;
    
  }
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="ListCtrl">
  
    <ul ng-repeat="car in cars | filter: myCustomFilter">
      <li>{{car.name}}</li>
    </ul>
    
  </div>
</div>