简体   繁体   中英

Angular JS - how to set filter by attribute value?

I have this list using ng-repeat with filter:

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

I would like to after ng-click method show only items which JSON attribute "type" == "CUSTOM"

I tried to do it by this way:

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

But it search in all attributes in JSON.

Question is: How can i set which column (or columns) can be used for search?

Additional question: Is possible to set sorting by another JSON attribute together?

JSON result looks like:

 "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
        }
    ]

Many Thanks for any advice.

EDIT:

Now i can filter by value in attribute, but not by value in text input:

$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>

you can do ng-hide for this : 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>

EDIT

you can use different properties using having the property in a variable

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


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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM