Question

我尝试使用ng-repeat显示一些数据。我希望对显示的数据进行过滤，当我点击特定项目时，应该删除过滤器。当我再次点击该特定项目时，应再次添加过滤器。

我从一个想法开始，在我看来，我有：

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

在我的控制器中：

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

当我提醒name时，它会提供正确的过滤项目，但它未在视图中更新。我认为这必须对ng-repeat的子范围做一些事情，但我不知道如何通过切换过滤器来做到这一点。

有没有人有任何建议或解决方案来解决这个问题？

Answer 1

您可能希望跟踪行的状态（单击或不单击）。理想情况下，您不希望更改范围属性的名称。

以下代码应该适合您

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

保持简单并创建一个包装器：

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

ng-repeat

2 个答案: