javascript - 在 Angular js 中按类名过滤匹配的元素。

Question

问题:

我有一个无序列表的项目，这些项目从 json 调用返回并使用 ng-repeat 输出。每一项都有一个类名(大约有 9 个类别)。

我有第二个无序列表，它只是可用类别的列表。

目标:

我希望能够选择右侧列表中的类别之一，这会将过滤器应用于返回元素的实际列表。这应该通过切换按钮激活(因此单击一次:过滤，再次单击:过滤器删除)。因此，它只是将单击的元素中的类名与 json 数据列表中共享相同类名的元素相匹配。

我无法使用 ng-model (因为这是为某些表单元素保留的)。

对于我的 jsfiddle，我只是使用静态 html。

这是我的 Angular 代码:

/* angular custom filter on returned ajax api data */
var app = angular.module('app', []);

app.controller('main', function($scope) {
    $scope.chFilters = {};

    $scope.links = [
        {name: 'atm'},
        {name: 'internet'},
        {name: 'mobile'},
        {name: 'sms'},
        {name: 'postal'}
    ];

    $scope.channels = ["ATM", "INTERNET", "SMS", "POSTAL","MOBILE"];

});

(这是基于我在 SO 上发现的另一个问题)。不幸的是， fiddle 有点乱，里面有一些无关的代码。

HTML:

<div ng-app="app">
    <div ng-controller="main">
        <ul>
            <li class="atm">Some stuff ATM</li>
            <li class="internet">Some stuff INTERNET</li>   
            <li class="sms">Some stuff ATM</li>   
            <li class="atm">Some stuff ATM</li>   
            <li class="postal">Some stuff POSTAL</li>   
            <li class="atm">Some stuff ATM</li>   
            <li class="internet">Some stuff INTERNET</li>   
            <li class="postal">Some stuff POSTAL</li>   
            <li class="postal">Some stuff POSTAL</li>   
            <li class="atm">Some stuff ATM</li>   
            <li class="sms">Some stuff SMS</li>   
            <li class="mobile">Some stuff MOBILE</li>   
            <li class="internet">Some stuff INTERNET</li>   
            <li class="mobile">Some stuff MOBILE</li>   
        </ul>

        <ul class="channel-filters">
            <li ng-repeat="link in links | filter:chFilters" class="{{link.name | lowercase}}"><a ng-click="chFilters.name = link.name">{{link.name | uppercase}}</a></li>
            <li class="last" ng-click="chFilters.name = ''">CLEAR FILTER</li>
        </ul>

        <ul>
            <li ng-repeat="channel in channels | filter:chFilters">
                <strong>{{channel}}</strong>
                <a ng-click="chFilters = channel">{{channel}}</a>
            </li>
        </ul>

        <!-- original -->
        <ul>
            <li ng-repeat="link in links | filter:chFilters">
                <strong>{{link.name}}</strong>
                <a ng-click="chFilters.name = link.name">{{link.name}}</a>
            </li>
        </ul>
    </div>
</div>

这是应用程序中的实际 HTML(包含对 api 的调用)。

<ul class="accordion">
    <li class="search-text-channel">
        <input type="textarea" ng-model="searchTextChannel.$" placeholder="Search"/>
    </li>
    <li ng-repeat="day in interactions.model.byDay | filter:searchTextChannel" ng-click="hidden = !hidden" ng-init="hidden = false" class="{{day.channel | removeSpace | lowercase}}" ng-class="{'closed': !hidden, 'open': hidden}">
        <span class="date">{{day.date}}</span>
        <span class="subheading">{{day.channel}}</span>
        <ul ng-show="hidden">
            <li ng-repeat="interaction in day.interactions">
                {{interaction.time}} {{interaction.description | removeUnderscore}}
            </li>
        </ul>
    </li>
    <li class="load-more">
        <a href="" ng-click="interactions.loadMore()"><i class="fa fa-plus"></i>LOAD MORE</a>
    </li>
</ul>

我已经设法在 jquery 中重新创建此功能，但我认为在 Angular 应用程序中实现 Angular 解决方案会更好。

我尝试过研究并尝试实现显示/隐藏以及自定义过滤器，但到目前为止还没有任何乐趣。

这是我的(凌乱的)jsfiddle

Answer 1

<ul>
    <li ng-repeat="channel in channels | filter:chFilters.name">
        <strong>{{channel}}</strong>
        <a ng-click="chFilters = channel">{{channel}}</a>
    </li>
</ul>
<!-- original -->
<ul>
    <li ng-repeat="link in links | filter:chFilters.name">
        <strong>{{link.name}}</strong>
        <a ng-click="chFilters.name = link.name">{{link.name}}</a>
    </li>
</ul>

更新Plunker

如果您对此有任何疑问，请告诉我。