Bộ lọc chuyển đổi góc trong ng-repeat

Question

Tôi đang cố gắng hiển thị một số dữ liệu bằng cách sử dụng ng-repeat. Tôi muốn có bộ lọc trên dữ liệu được hiển thị và khi tôi nhấp vào một mục cụ thể, bộ lọc sẽ bị xóa. Khi tôi nhấp lại vào mục cụ thể đó, bộ lọc sẽ được thêm lại.

Tôi đã bắt đầu với một ý tưởng, theo quan điểm của tôi, tôi có:

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

Trong điều khiển của tôi:

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

Khi tôi báo cho name nó mang lại cho các mục lọc chính xác, nhưng nó không cập nhật trong chế độ xem. Tôi nghĩ rằng điều này đã làm điều gì đó với một phạm vi con của ng-repeat, nhưng tôi không biết làm thế nào để làm điều này với toggling một bộ lọc.

Có ai có bất kỳ đề xuất hoặc giải pháp nào để giải quyết vấn đề này không?

Answer 1

Nó không cập nhật trong chế độ xem, beacause trong $ scope.toggleFilter bạn đang sửa đổi biến cục bộ không được ràng buộc với chế độ xem, trong góc danh sách đó được liên kết với biến $ scope.tickets của bạn để bạn nên sửa đổi biến được liên kết trực tiếp để xem thay đổi của bạn trong giao diện, bạn có thể đạt được điều này bằng cách sử dụng biến iterator $ index có sẵn khi bạn sử dụng ngRepeat https://docs.angularjs.org/api/ng/directive/ngRepeat

kết quả sẽ được một cái gì đó như thế này:

-Xem:

<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 Tắt chủ đề: Tôi thấy rằng bạn đang sử dụng khuôn khổ ion, nếu bạn đang sử dụng ng-repeat trong các thiết bị di động hiệu suất sẽ là tốt hơn nếu bạn sử dụng bộ sưu tập chỉ thị lặp lại, thiết bị di động không hoạt động trơn tru khi bạn cuộn danh sách dài các phần tử với ng-lặp lại vì liên kết hai chiều của góc. http://ionicframework.com/docs/api/directive/collectionRepeat/

Answer 2

Giữ nó đơn giản và tạo ra một 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.

Answer 3

Bạn sẽ muốn theo dõi trạng thái của hàng (được nhấp hoặc không được nhấp). Lý tưởng nhất là bạn không muốn thay đổi tên của thuộc tính phạm vi.

Các mã sau đây nên làm việc cho bạn

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