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.