Angular JS自定义过滤器问题答案

【问题标题】：Angular JS Custom Filter TroubleAngular JS自定义过滤器问题
【发布时间】：2015-05-15 09:40:58
【问题描述】：

我正在通过创建自己的应用程序来学习 Angular JS。我的重点是 Angular，所以我没有像在现实世界中那样连接到数据库 - 因此我有一组 movies = [{title: '', genre: '', rating: ''}...] 硬编码到我的 js 文件中。

我有一系列具有不同电影评级的按钮：G、PG、PG13、R。每个按钮都应该用作过滤器，然后返回评级与按钮匹配的电影。单击按钮时，Data.selectedRating 存储该值。但是，我在使用内置过滤器时遇到了麻烦，因为如果没有具有所需评级的电影，它会在不返回任何内容时返回所有电影。如果单击“PG”按钮，它会返回评级为 PG 和 PG13 的电影。

有没有办法解决这个问题？我想我可能需要制作一个自定义过滤器，但我不确定如何去做（我相信你会知道的）。有什么建议么？谢谢！

这是我所拥有的：

HTML

// Data.selectedRating holds the value of the button that was clicked 
// Built in filter looked like this: 
// ng-repeat="movie in movies | filter: Data.selectedRating"
<table>
    <tr ng-repeat="movie in movies">
        <td>
            {{movie.title | filterRating}}
        </td>
    </tr>
</table>

angular.module('movieApp', ['ngAnimate', 'ui.router'])
.factory('Data', function() {

       return { sortType: '', 
                selectedGenre: '',
                selectedRating: ''};
 })

.controller('formController', ['$scope', 'Data', function($scope, Data) {

   $scope.Data = Data;

   $scope.movies = [
    {title:'Pitch Perfect 2', genre: 'Musical', rating: 'PG13'},
    {title:'Longest Ride', genre: 'Romance', rating: 'PG13'},
    {title:'Furious 7', genre: 'Action', rating: 'PG13'},
    {title:'Home', genre: 'Adventure', rating: 'PG'},
    {title:'Insurgent', genre: 'Action', rating: 'PG13'}
    ];
 }])

.filter('filterRating', function() {

    var out = [];
    return function(selectedRating, a) {

        if(selectedRating.rating == Data.selectedRating)
        {
            out.push(selectedRating.title);
        }
    }
    return out;
});

=============================================

更新 - 我已经添加了以下一些 cmets 的建议 - 谢谢！现在，返回的是“未定义”而不是电影的名称。有任何想法吗？

更新代码： HTML：

...
<td>
    {{movie.title | filterRating}}
</td>
...

.filter('filterRating', function() {

    return function(selectedRating, movies) {

        var out = [];

        if(Data.selectedRating == selectedRating.rating)
        {
            alert(' in here');
            out.push(movies.title);
        }
        return out;
    }
});

【问题讨论】：

您需要将var out = []; 和return out 行放在过滤器的函数中。您还必须将电影数组作为参数，并对其进行迭代。将您的解决方案与stackoverflow.com/a/15197233/624590 进行比较以了解更多详情。
AngularJS - How to structure a custom filter with ng-repeat to return items conditionally的可能重复
谢谢@DRobinson！这有帮助！我用编辑编辑了我的帖子。现在它返回“未定义”而不是电影名称。你知道为什么吗？谢谢！
HTML 可以是 <tr ng-repeat="movie in movies | filterRating:Data.selectedRating"> 。过滤器可以是function(movies, selectedRating){ var out = movies.filter(function(movie){ return movie.rating === selectedRating; }); return out; }。（内部过滤器调用是 Array 的原型过滤器，而不是 Angular 的过滤器）
哇！你太棒了@DRobinson！非常感谢！有效！如果您在答案中发表评论，我会将其标记为正确！非常感谢！我真的很感激！

标签： angularjs filter

【解决方案1】：

你的过滤功能应该是这样的

.filter('filterRating', function() {
  return function(movies) {
    var out = [];

    angular.forEach(movies, function(movie) {
      if (movie.rating == Data.selectedRating)  out.push(movie);
    });
    return out;
  }
});

【讨论】：

【解决方案2】：

你的代码应该是：

HTML

 <tr ng-repeat="movie in movies | filterRating ">
      <td>
          {{movie.title }}
      </td>
  </tr>

.filter('filterRating', function(Data) {


return function(selectedRating) {
  var out = [];
    for (var i = 0; i < selectedRating.length; i++) {

      if(selectedRating[i].rating == Data.selectedRating)
      {
        out.push(selectedRating[i]);
      }

    }
    return out;
}

});

原因是你想过滤电影对象而不是标题本身

PLUNKR：http://plnkr.co/edit/nYAX9kiBhqYyXCqaMYhc?p=preview

【讨论】：