Question

例如，如果我在这里拥有所有书籍语言的json数据集：

$scope.data = [{
    "title": "Alice in wonderland",
    "author": "Lewis Carroll",
    "lang": ["en"]
}, {
    "title": "Journey to the West",
    "author": "Wu Cheng'en",
    "lang": ["ch"]
}]

而我只想展示英文书籍，我能否纯粹使用ng-repeat中的过滤器来完成这项工作？

E.g。

<div ng-repeat="d in data | filter:d.lang='en'" style="margin-bottom: 2%">
    {{d.title}}
</div>

我不希望通过任何形式的控件（单选按钮等）来实现。这有可能吗？

-EDIT-感谢@GrizzlyMcBear带领我走正确的道路！我得到它使用稍微不同的过滤功能（我将在下面粘贴）

app.filter('MyFilter', function() {

    var out = [];
    angular.forEach(input, function(i) {

      if (i.lang[0] === 'en') {
        out.push(i);
      }
    })

    return out;
  }

});

并在HTML中

<div ng-repeat="d in data | MyFilter" style="margin-bottom: 2%">
    {{d.title}}
</div>

Answer 1

试试这个

<div ng-repeat="d in data | filter: { lang : 'en'} " style="margin-bottom: 2%">

的 DEMO

Answer 2

你应该使用有角度的filter，

我还建议你在过滤器中使用一个函数：

<div ng-repeat="item in collection | filter:filteringFunction" style="margin-bottom: 2%">
    {{d.title}}
</div>

这种方式可以为你提供更多的免费服务（非常欢迎你大声欢呼Mel Gibson风格;-)）
通过引入更复杂的过滤逻辑来过滤数据。

    var filteredLang = "en";

    function filterByBookLanguage(collectionItem) {
        var result = false;

        if (collectionItem.lang[0] === filteredLang) {
            result = true;
        }

        return result;
    }

    $scope.filteringFunction = filterByBookLanguage;

现在如果您愿意，您也可以更改编码器功能 - filterByBookLanguage
（我的术语）。

说你的老板突然希望你从过滤书籍中改变过滤逻辑按作者姓名过滤。现在你所要做的就是添加这个条件：

    if (bossWantsToChangeFilter) {
        $scope.filteringFunction = filterByAuthorName;
    } else {
        $scope.filteringFunction = filterByBookLanguage;
    }

您必须记住的是使用当前过滤的项目编写comperator函数作为参数并更新语言/作者姓名的比较值在您找到方便的位置（$ scope，本地变量，服务等）。

将角度ng-repeat限制为某些行

2 个答案: