Angular toggle filter in ng-repeat

Question

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

I've started with an idea, in my view 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 alert the name it gives the correct filtered item, but it's not updating in the view. I think this has to do something with a child scope of the ng-repeat, but I don't know how to do this with toggling a filter.

Does anyone has any suggestions or a solution to solve this problem?

Answer 1

You would want to keep a track of the state of the row (clicked or not clicked). Ideally you do not want to change the scope property's name.

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>