Angular JS - 如何按属性值设置过滤器？

Question

我有这个使用带有过滤器的 ng-repeat 的列表：

<a href="#/themes/detail/{{theme.id}}" ng-repeat="theme in themes| filter:q" class="list-group-item">
                    <b>{{theme.name}}</b>
                    <span class="themesListIcons">
                        <i class="fa fa-check-square-o"></i> {{theme.avg_score}}
                        <i class="fa fa-comment-o"></i> {{theme.count_of_cards}}
                    </span>
                </a>

我想在 ng-click 方法之后只显示 JSON 属性“type”==“CUSTOM”的项目

我尝试过这样做：

$scope.setFilter = function(theme) {
    console.log("Trying to set filter");
    $scope.q = "CUSTOM"
};

但它会搜索 JSON 中的所有属性。

问题是： 如何设置可用于搜索的一列（或多列）？

其他问题： 是否可以通过另一个 JSON 属性一起设置排序？

JSON 结果如下：

 "themes": [
        {
            "id": "20",
            "user_id": "50",
            "name": "dwdwdw",
            "language_code_from": "cz",
            "language_code_to": "en",
            "type": "CUSTOM",
            "created": "2014-10-19 15:36:05",
            "count_of_cards": 0,
            "avg_score": 0
        },
        {
            "id": "21",
            "user_id": "50",
            "name": "wfwfw",
            "language_code_from": "en",
            "language_code_to": "cz",
            "type": "CUSTOM",
            "created": "2014-10-19 15:36:27",
            "count_of_cards": 0,
            "avg_score": 0
        }
    ]

非常感谢您的任何建议。

编辑：

现在我可以按属性中的值进行过滤，但不能按文本输入中的值进行过滤：

$scope.setFilter = function(filter) {
            console.log("Trying to set filter");
            switch (filter) {
                case "CUSTOM":
                    $scope.filterProp = "type";
                    $scope.filterValue = "CUSTOM";
                    console.log("apply custom");
                    return true;
                case "BASIC":
                    $scope.filterProp = "type";
                    $scope.filterValue = "BASIC";
                    console.log("apply basic");
                    return true;
                case "NAME":
                    $scope.filterProp = "name";
                    $scope.filterValue = $scope.q;
                    console.log("apply name "+$scope.q);
                    return true;
            }
        };


<div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-check-square-o"></i></span>
                    <input type="text" ng-model="q" ng-change="setFilter('NAME');" class="form-control" placeholder="Find by theme name">
                </div>
                    <a href="#" class="list-group-item active">
                        List of found themes
                    </a>
                <a href="#/themes/add" ng-if="themes.length == 0" class="list-group-item">
                    <b>No theme found, add some please</b>
                </a>
                <a href="#/themes/detail/{{theme.id}}" ng-repeat="theme in themes" ng-hide="theme[filterProp] !== filterValue" class="list-group-item">
                    <b>{{theme.name}}</b>
                    <span class="themesListIcons">
                        <i class="fa fa-check-square-o"></i> {{theme.avg_score}}
                        <i class="fa fa-comment-o"></i> {{theme.count_of_cards}}
                    </span>
                </a>

Answer 1

你可以为此做 ng-hide ：ng-hide="theme.type == q"

     <div ng-repeat="theme in themes>
         <a href="#/themes/detail/{{theme.id}}" ng-hide="theme.type == q" class="list-group-item">
                <b>{{theme.name}}</b>
                <span class="themesListIcons">
                    <i class="fa fa-check-square-o"></i> {{theme.avg_score}}
                    <i class="fa fa-comment-o"></i> {{theme.count_of_cards}}
                </span>
            </a>
     </div>

编辑

您可以通过将属性放在变量中来使用不同的属性

$scope.setFilter = function(theme) {
    $scope.filterProp = "type";
    $scope.filterValue = "CUSTOM"
};


ng-hide="theme[filterProp] === filterValue"