Angularjs 自定义过滤器故障

我正在通过创建自己的应用程序学习Angular JS。我的关注点是有角度的，所以我没有像在现实世界中那样连接到数据库-因此我有一系列

电影=[{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>

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

更新-我通过下面的一些评论添加了建议-谢谢！现在，不是电影的名字，“undefined”是return。有什么想法吗

更新代码： HTML:

您的代码应该是：

HTML

{{movie.title}

JS

.filter（'filterRating'，函数（数据）{
返回函数（selectedRating）{
var out=[]；
对于（变量i=0；i

这样做的原因是，您希望过滤电影对象，而不是标题本身

---

PLUNKR:

您的筛选函数应该是这样的

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

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

---

您需要将

var out=[]和
返回过滤器函数内的
行。您还必须将电影数组作为参数，并对其进行迭代。有关更多详细信息，请将您的解决方案与进行比较。可能重复感谢@DRobinson！那有帮助！我编辑了我的文章。现在它返回“undefined”而不是电影名称。你知道为什么吗？谢谢HTML可以是
。过滤器可以是
函数（movies，selectedRating）{var out=movies.Filter（函数（movie）{return movie.rating==selectedRating；}）；return out；}
。（内部过滤器调用是数组的原型过滤器，而不是angular的过滤器）哇！你真是太棒了@DRobinson！非常感谢！成功了！如果你把你的评论写在答案里，我会把它标记为正确的！非常感谢！我真的很感激！
...
<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;
    }
});

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

});

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

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