Angular switch filter to ng-repeat

Question

I am trying to display some data using ng-repeat . I want to have a filter on the displayed data, and when I click on a specific item, the filter must be removed. When I click on this particular item again, the filter should be added again.

I started with an idea, in my opinion, I have:

 <ion-item class="row" ng-repeat="t in tickets"> <div class="col" ng-click="toggleFilter(t.name)">{{t.name}}</div> </ion-item> 

In my controller:

 .controller('TicketCtrl', function ($scope, $filter) { $scope.toggleFilter = function (name) { name = $filter('getSlice')(name); alert(name); } }); 

When I warn name , it gives the correct filtered item, but it is not updated in the view. I think this should do something with the ng-repeat child scope, but I don't know how to do this with filter switching.

Does anyone have any suggestions or solutions to solve this problem?

Answer 1

It is not updated in the view, beacause in $ scope.toggleFilter you modify a local variable that is not bound to the view, in this list angular binds to the variable $ scope.tickets, so you need to change the bound variable to see your changes in the view, you can achieve of this using the $ index iterator variable available when using ngRepeat https://docs.angularjs.org/api/ng/directive/ngRepeat

The result should be something like this:

-view:

 <ion-item class="row" ng-repeat="t in tickets"> <div class="col" ng-click="toggleFilter(t.name, $index)">{{t.name}}</div> </ion-item> 

-controller:

 .controller('TicketCtrl', function ($scope, $filter) { $scope.toggleFilter = function (name, index) { $scope.tickets[index].name = $filter('getSlice')(name); alert(name); } 

PS Off topic: I see that you are using ionic infrastructure, if you are going to use ng-repeat on mobile devices, the performance will be much better if you use the collection repeat directive, mobile devices do not perform smooth when you scroll through long lists of elements with ng-repeat because 2-sided binding is angular. http://ionicframework.com/docs/api/directive/collectionRepeat/

Answer 2

You will need to track the status of the row (click or not click). Ideally, you do not want to change the name of the scope property.

The following code should work for you

 <ion-item class="row" ng-repeat="t in tickets" ng-click="t.clicked=!t.clicked"> <div class="col" ng-if="t.clicked">{{t.name | getSlice}}</div> <div class="col" ng-if="!t.clicked">{{t.name}}</div> </ion-item> 

Answer 3

Keep it simple and create a wrapper:

HTML:

 <div ng-app="app"> <div ng-controller="ctrl"> <button ng-click="toggleFilter()">Toggle Filter</button><br/> <span ng-repeat="item in data | filter:myFilter"> {{item}}<br/> </span> </div> </div> 

JS:

 angular.module('app',[]). controller('ctrl', function($scope){ $scope.data = [1,2,3,4,5,6,7,8,9,10]; $scope.shouldRunFilter = false; $scope.myFilter = function(item){ if($scope.shouldRunFilter) { return item > 5; } return item; } $scope.toggleFilter = function(){ $scope.shouldRunFilter = !$scope.shouldRunFilter; } }); 

JSFIDDLE .