Angular JS - how to set filter by attribute value?

Question

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>

harishr · Accepted Answer · 2014-10-22 18:51:15Z

1

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"

edited Oct 22, 2014 at 18:51

answered Oct 22, 2014 at 18:33

harishr

18.1k9 gold badges84 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

redrom Over a year ago

Thanks but i want to have a lot of buttons and each from them should to filter using another attribute and ng-hide="theme.type == q" in your example can filer only for one given attribute.

redrom Over a year ago

Thanks now is it much better. But I found problem with text pnut value. Check my update please.

harishr Over a year ago

You are asking multiple questions, one after other in same question. The above answer suffice for your original question. Can you please create new question for your above comment

Collectives™ on Stack Overflow

Angular JS - how to set filter by attribute value?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related