Filtr przełączania kątowego w powtórzeniu ng

Question

Próbuję wyświetlić niektóre dane za pomocą ng-repeat. Chcę mieć filtr wyświetlanych danych i kiedy kliknę konkretny element, filtr powinien zostać usunięty. Po ponownym kliknięciu tego konkretnego elementu filtr powinien zostać dodany ponownie.

zacząłem z pomysłem, moim zdaniem mam:

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

W moim kontrolera:

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

Kiedy zaalarmowania name Daje poprawną przefiltrowaną element, ale to nie aktualizuje w widoku. Myślę, że to musi zrobić coś z zasięgiem dziecka z ng-repeat, ale nie wiem jak to zrobić z przełączaniem filtra.

Czy ktoś ma jakieś sugestie lub rozwiązanie, aby rozwiązać ten problem?

Answer 1

To nie jest aktualizowanie w widoku, ponieważ w $ scope.toggleFilter modyfikujesz zmienną lokalną niezwiązaną z widokiem, w tej liście kątowa jest powiązana z twoją zmienną $ scope.tickets, więc powinieneś zmodyfikować bezpośrednio zmienną aby zobaczyć zmiany w widoku, można achive to za pomocą zmiennej iteracyjnej $ indeks dostępny podczas korzystania ngRepeat https://docs.angularjs.org/api/ng/directive/ngRepeat

wynikiem powinno być coś takiego:

-widok:

<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: Widzę, że używasz jonową ramy, jeśli masz zamiar używać NG-repeat w urządzeniach mobilnych wydajność ma być znacznie lepiej, gdyby użyć kolekcji powtarzanie dyrektywy, urządzenia przenośne nie działają płynnie podczas przewijania długich list elementów z ng-repeat, ponieważ de 2 way binding of angle. http://ionicframework.com/docs/api/directive/collectionRepeat/

Answer 2

Keep it simple i stworzyć opakowanie:

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.

Answer 3

Użytkownik chciałby śledzić stan wiersza (kliknięty lub nie kliknięty). Idealnie nie chcesz zmieniać nazwy właściwości zakresu.

Poniższy kod powinien pracować dla Ciebie

<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>