Question

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

我有一个类型的下拉字段，返回值(ng-model = query.genres)

我试图创建一个自定义函数，它将genre和secondary genre与query.genre进行比较，如果满足EITHER条件则返回。单独他们工作正常，即使用filter：{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，如何编写此自定义过滤器以返回项目。

Answer 1

您的过滤器无法正常工作，因为您没有正确使用.filter()方法，该方法要求参数为lambda函数，在该函数中返回该项是否应该保留在列表中。要修复代码，您必须更改以下行：

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

要：

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

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

＆＃13;

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']);
});

＆＃13;

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

＆＃13;

自定义过滤器未在angular1

1 个答案: