Question

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

我有一系列具有不同电影评级的按钮：G，PG，PG13，R。每个按钮应该用作过滤器，然后返回评级与按钮匹配的电影。单击该按钮时，Data.selectedRating将存储该值。但是，我在使用内置过滤器时遇到了麻烦，因为如果没有具有所需等级的电影，当它应该不返回时，它将返回所有电影。如果＆＃34; PG＆＃34;单击按钮，返回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>

JS

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

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

更新 - 我已经通过以下几条评论添加了建议 - 谢谢！现在，而不是电影的名称，＆＃34; undefined＆＃34;是回归。有任何想法吗？

更新代码： HTML：

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

JS

.filter('filterRating', function() {

    return function(selectedRating, movies) {

        var out = [];

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

Answer 1

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

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

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

Answer 2

您的代码应为：

HTML

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

JS

.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

Angular JS自定义过滤器问题

2 个答案: