Angular JS自定义过滤器故障 [英] Angular JS Custom Filter Trouble

问题描述

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

我有一系列不同的电影评级的按钮：G，PG，PG13，R。每个按钮都应该作为过滤器，然后返回评级匹配的电影按钮。点击按钮时， Data.selectedRating 存储该值。然而，我遇到了内置过滤器的麻烦，因为如果没有所需的评级的电影，它将返回所有的时候，它应该没有返回。如果点击PG按钮，则返回PG和PG13的电影。

有没有办法解决这个问题？我想我可能需要做一个自定义的过滤器，但我不知道如何去做（因为我敢肯定，你可以告诉）。有什么建议么？谢谢！

以下是我的：

HTML

  // Data.selectedRating保存点击按钮的值
 //内置过滤器如下所示：
 // ng-repeat =电影中的电影|过滤器：Data.selectedRating
< table> 
< tr ng-repeat =电影中的电影> 
< 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'，函数（$ scope，Data）{
 
 $ scope.Data = Data; 
 
 $ scope.movi​​es = [
 {title：'Pitch Perfect 2'，流派：'Musical'，评分：'PG13'}，
 {title：'最长的骑行'，流派：'Romance'，评分：'PG13'}，
 {title：'Furious 7'，流派：'Action'，评分：'PG13'}，
 {title：'Home'，流派：'冒险'，评分：'PG'}，
 {title：'Insurgent'，genre：'Action'，rating：'PG13'} 
]; 
}]）
 
 .filter（'filterRating'，function （）{
 
 var out = []; 
返回funct ion（selectedRating，a）{
 
 if（selectedRating.rating == Data.selectedRating）
 {
 out.push（selectedRating.title）; 
} 
} 
退出; 
}）; 
  

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

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

更新后的代码：
HTML：

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

JS

< （$ {





$返回函数];

if（Data.selectedRating == selectedRating.rating）
{
alert（'here'）;
out.push（movies.title） ;
}
退货;
}
}）;

解决方案

您的代码应该是：
$ b

HTML

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

JS

  
 
 return function（selectedRating）{
 var out = []; 
 for var i = 0; i  
 if（selectedRating [i] .rating == Data.selectedRating）
 {
 out.push（ selectedRating [i]）; 
} 
 
} 
退出; 
} 
 
}）; 
  

原因是您要过滤电影对象而不是标题本身 p>

PLUNKR： http://plnkr.co/编辑/ nYAX9kiBhqYyXCqaMYhc？p =预览

I'm working on learning Angular JS by creating my own app. My focus is Angular, so I'm not connecting to a database like one would in the real world - thus I have an array of movies = [{title: '', genre: '', rating: ''}...] hard coded into my js file.

I have a series of buttons with the different movie ratings: G, PG, PG13, R. Each button should work as a filter and then return movies who's rating matches the button. When the button is clicked, Data.selectedRating stores the value. However, I'm running into trouble with the built-in filter because if there are no movies with the desired rating, it will return all of them when it should return none. And if the "PG" button is clicked it returns movies with the rating of PG and PG13.

Is there a way to fix this? I thought I may need to make a custom filter, but I'm not really sure how to go about it (as I'm sure you'll be able to tell). Any suggestions? Thanks!

Here's what I have:

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

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

Update - I have added the suggestions by a few of the comments below - Thanks! Now, instead of the name of the movie, "undefined" is return. Any ideas?

Updated Code: 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;
    }
});

解决方案

Your code should be :

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

});

The reason for it, is that you want to filter the movie object and not the title itself

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

这篇关于Angular JS自定义过滤器故障的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！