Угловая ошибка пользовательского фильтра JS

Question

Я работаю над изучением Углового 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> 

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

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

Обновление - Я добавил предложения по нескольким комментариям ниже - Спасибо! Теперь вместо имени фильма «undefined» - это возврат. Есть идеи?

Обновленный код: 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

Ваш код должен быть:

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

Answer 2

Вы отфильтровывать функция должна быть, как это

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

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