自定义过滤器未在 angular1 中触发

Question

我在摘要中有两个字段：genres 和 secondary_genre，它们是整数。

我有一个流派下拉字段，return是一个值 (ng-model = query.genres)

我试图创建一个自定义函数，如果满足任一条件，它将比较流派和次要流派与 query.genre 和 return。它们单独工作正常，即使用过滤器：{secondary_genre:query.genre) 但对于 OR 条件，我需要一个自定义。

我写的自定义过滤器是用

调用的

<li ng-repeat="film in listOfTitles | customGenreFilter:query.genre">

过滤器是

.filter('customGenreFilter', function() {
    return function(data, query) {
        if (data) {
            return data.filter(data.genres == query || data.secondary_genre == query);
        }
        else {
            return [];
        }
    };
});

但它抛出错误。如果条件 genres = query.genre OR secondary_genre = query.genre.

，我如何将此自定义过滤器写入 return 项目

Answer 1

你的过滤器不工作，因为你没有正确使用 .filter() 方法，该方法要求参数是一个 lambda 函数，其中 return 项目是否应该留在列表。为了修复您的代码，您必须更改以下行：

return data.filter(data.genres == query || data.secondary_genre == query);

收件人：

return data.filter(function(item) {
    return item.genre == query || item.secondary_genre == query
});

以下示例实现了过滤器的工作版本。

angular.module('myApp', [])
  .component('app', {
    templateUrl: '/app.html',
    controller: App
  })
  .filter('customGenreFilter', CustomGenreFilter);

function App($scope) {
  $scope.query = {
    genre: ''
  };
  $scope.listOfTitles = [
    { title: 'test 1', genre: 'genre1' },
    { title: 'test 2', genre: 'genre2' },
  ];
}

function CustomGenreFilter() {
  return function(data, query) {
    if (query === '') return data;
    if (data) return data.filter(function(item) {
      return item.genre == query || item.secondary_genre == query
    });
    return [];
  };
}

angular.element(function() {
  angular.bootstrap(document, ['myApp']);
});

<script id="/app.html" type="text/ng-template">
  <select ng-model="query.genre" ng-options="item as item for item in ['', 'genre1', 'genre2']">
  </select>
  <ul>
    <li ng-repeat="film in listOfTitles | customGenreFilter:query.genre">
      {{ film.title }}
    </li>
  </ul>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<app />

自定义过滤器未在 angular1 中触发

Custom Filter not firing in angular1

angularjs

angularjs-filter