Javascript ng重复中的角度切换滤波器

我正在尝试使用

ng repeat

显示一些数据。我想在显示的数据上有一个过滤器，当我点击一个特定的项目时，过滤器应该被删除。当我再次单击该特定项时，应再次添加过滤器

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

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

当我提醒

名称时

会给出正确的过滤项，但它不会在视图中更新。我认为这和

ng repeat

的子范围有关，但我不知道如何通过切换过滤器来实现这一点

---

有人有什么建议或解决方案来解决这个问题吗？

它没有在视图中更新，因为在$scope.toggleFilter中，您正在修改未与视图绑定的局部变量，在该列表中，angular与$scope.tickets变量绑定，因此您应该直接修改绑定的变量以查看视图中的更改，使用ngRepeat时，可以使用$index迭代器变量实现这一点

结果应该是这样的：

-视图：

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

PS Off-topic：我看到您使用的是ionic framework，如果您打算在移动设备中使用ng repeat，那么性能会更好，如果您使用collection repeat指令，那么当您使用ng repeat滚动元素的长列表时，移动设备的性能不会平滑，因为de 2路绑定角度。

---

保持简单并创建包装：

HTML:

---

.

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

下面的代码应该适合您

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

{{t.name | getSlice}}
{{t.name}}

您能否进一步说明过滤器的工作原理？当前，您的

toggleFilter

函数除了重新指定作为参数传入的

name

变量的值外，没有做任何有用的事情。@djskinner my filter只接受一个输入，并将该输入切分为最多20个字符的输出，并在末尾添加“…”。当我提醒

name

时，过滤器正在工作。是的，这是一个很好的解决方案，也是我的初始解决方案。我遇到的唯一问题是，在一些较旧的设备上，您同时看到两个div达一毫秒左右，这就是我想要防止的。无论如何谢谢你！我不知道，但现在过滤器将应用于

ng repeat

中的所有项目。我只想为特定的项目。我正在用哈维尔·阿贝戈的想法研究一个解决方案。无论如何，我使用了你的

shouldlrunfilter

检查，谢谢你！谢谢你的回答！通过使用

索引

，我可以使它工作。为了切换，我将原始数据保存在一个数组中，并且我还有一个数组来检查特定项是否应该获得过滤器true或false。哦，我不得不在

ng repeat

中添加

track by$index

。编辑：还感谢您提供有关收藏重复的提示。但我实际上并没有在我的列表中使用大量的项目，我认为每个列表最多使用10个项目左右。那么它仍然有用吗？很高兴它有帮助，在旧设备中，您会注意到滚动更平滑一些。但在较新的设备中，您肯定不会注意到差异。

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

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

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;
    }
});

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