How can I filter on first click and then reset filter on second click ? I want to show items having images first and then reset filter on second click. Please check [fiddle][1] [1]: http://jsfiddle.net/6L7xn/9/ Thanks
<button class="btn btn-primary" ng-click="myFilter = {'largeImage': {'hasImage': 'Yes'}}">Images</button
I have forked your jsfiddle: http://jsfiddle.net/jkrielaars/n5q9xeej/2/
There were a few things I had to change:
:true to the filter as third paramController:
$scope.myFilter = {};
$scope.toggleFilter = function(){
if(angular.equals({}, $scope.myFilter)){
$scope.myFilter = {'largeImage': {'hasImage': 'yes'}};
}else{
$scope.myFilter = {};
}
}
And the view:
<button class="btn btn-primary" ng-click="toggleFilter()">Images</button>
<div class="item-sc" data-ng-repeat="d in things | filter:myFilter:true">
Simple enough to add a function to set a scope variable in your controller that you can call from ng-click. Then set your filter to equal the value in the scope variable. Like this:
Add to controller
$scope.myFilter = 'no' // or whatever you want to default to;
$scope.setMyFilter = function(){
$scope.myFilter = $scope.myFilter === 'no' ? 'yes' : 'no';
};
HTML
<div ng-app="MyApp">
<div class="container" ng-controller="sentCtrl">
<div class="row">
<div><strong>Only show:</strong>
<div class="btn-group btn-group-xs">
<button class="btn btn-primary" ng-click="setMyFilter()">Images</button>
</div>
</div>
</div>
<div class="row content-sc">
<div class="item-sc" data-ng-repeat="d in things | filter: {largeImage.hasImage: myFilter}">
<h4>{{d.NAME}}<br/><small>ID: {{d.ID}}</small></h4>
</div>
</div>
</div>
