Question

我的html中的视图在选择任何li元素时都没有过滤。

但是当我控制过滤器功能时，生成的输出是正确的。还有如何清除过滤器以便它可以再次重复使用。我在点击打开或关闭选择元素时得到一个空白页。任何人都可以帮助我这个。我在这些函数中的控制器中使用了两个过滤器 -

indexController函数 -

this.UserTickets = ()=> {
    //code to get the tickets
}

this.openTickets = () => {
    index.filteredTickets = $filter('filter')(index.tickets, { status: "open" } );
    console.log(index.filteredTickets);
};

//filter closed tickets
this.closeTickets =  () => {
    index.filteredTickets = $filter('filter')(index.tickets, { status: "close" } );
    console.log(index.filteredTickets);
};

this.clearFilter = () => {
    //clear the filter
};

HTML -

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a ng-click="indexCtrl.clearfilter()">None</a></li>
    <li><a ng-click="indexCtrl.openTickets()">Open</a></li>
    <li><a ng-click="indexCtrl.closeTickets()">Close</a></li>
</ul>

<div ng-repeat="ticket in indexCtrl.tickets | filter:tickets |filter:indexCtrl.filteredTickets">
    <div class="ticket-no">
        <h4>Ticket No:<span>{{ticket}}</span></h4>
    </div>
    <div class="ticket-title">
        <a ng-href="/ticketView/{{ticket.ticketid}}"><h3>{{ticket.title}}</h3></a>
    </div>
    <div class="ticket-info">
        <p class="pull-left">{{ticket.username}} On {{ticket.created | date:"MMM d, y h:mm a"}}</p>
        <p class="pull-right">Status:<span>{{ticket.status}}</span></p>
    </div>
    <hr class="hr">
</div>

Answer 1

您正在混合两种角度滤镜选项。我建议使用javascript过滤器index.filteredTickets=$filter('filter')(index.tickets,{status:"open"});而不是html模板语法ng-repeat="ticket in indexCtrl.tickets | filter:tickets..."。这些方法之间的关键区别在于它们运行的频率。 html模板语法过滤器在每个摘要周期运行，javascript过滤器仅在调用方法时运行，在您的情况下，在每次单击按钮时运行。对于小型应用程序或列表较小时，这种差异不会引人注意，但如果您的应用程序规模增大，则每个摘要周期的持续过滤都会导致页面滞后。

控制器中的过滤器是我处理此问题的首选方式，因此我将向您展示如何清理代码以使其正常工作。你几乎就在那里，只需要做一些小改动。

在您的html中，您可以移除ng-repeat中的内嵌过滤器，这些过滤器不需要，并将阵列更改为您的过滤器列表index.filteredTickets。

<强> html的

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a ng-click="indexCtrl.clearfilter()">None</a></li>
    <li><a ng-click="indexCtrl.openTickets()">Open</a></li>
    <li><a ng-click="indexCtrl.closeTickets()">Close</a></li>
</ul>

<div ng-repeat="ticket in indexCtrl.filteredTickets">
    <div class="ticket-no">
        <h4>Ticket No:<span>{{ticket}}</span></h4>
    </div>
    <div class="ticket-title">
        <a ng-href="/ticketView/{{ticket.ticketid}}"><h3>{{ticket.title}}</h3></a>
    </div>
    <div class="ticket-info">
        <p class="pull-left">{{ticket.username}} On {{ticket.created | date:"MMM d, y h:mm a"}}</p>
        <p class="pull-right">Status:<span>{{ticket.status}}</span></p>

    </div>
    <hr class="hr">
</div>

对于javascript，您需要确保html中可以访问filteredTickets。我不确定是否index == this，如果没有，您可能需要将过滤后的票证附加到范围。如果按下filteredTickets按钮，则需要进行另一项更改，即将none设置为原始列表。您还需要在加载列表后调用clearFilter，否则index.filteredList将是未定义/ null。

<强>的.js

this.UserTickets = () => {
    //code to get the tickets
    ....
    //after getting list, call clear filter
    this.clearFilter();
}

this.openTickets = () => {
    index.filteredTickets = $filter('filter')(index.tickets, { status: "open" } );
    console.log(index.filteredTickets);
};

//filter closed tickets
this.closeTickets = () => {
    index.filteredTickets = $filter('filter')(index.tickets, { status: "close" } );
    console.log(index.filteredTickets);
};

this.clearFilter = () => {
    //clear the filter
    index.filteredTickets = index.tickets;
};

AngularJs过滤不更新视图

1 个答案: