在 Angular js 中按 class 名称过滤匹配的元素。

Question

问题：

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

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

目标：

我希望能够 select 右侧列表中的类别之一，这将对返回元素的实际列表应用过滤器。这应该通过切换激活（因此单击一次：过滤，再次单击：删除过滤器）。因此，它只是希望将单击元素中的 classname 与 json 数据列表中共享相同 classname 的元素相匹配。

我不能使用 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 解决方案会更好。

我已经尝试研究并尝试实现 show/hide 以及自定义过滤器，但到目前为止没有任何乐趣。

这是我的（凌乱的）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

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

Answer 2

这是部分解决方案：

假设您的商品如下所示：

$scope.items = [
    { class: "atm", label: "Some stuff ATM" },
    { class: "internet", label: "Some stuff INTERNET" },
    { class: "sms", label: "Some stuff SMS" },
    { class: "postal", label: "Some stuff POSTAL" },
    ...
];

要显示过滤后的列表（目前仅按单个渠道过滤）：在范围内创建一个单独的列表，并应用过滤器：

$scope.click = function(name) {
    $scope.chFilters.name = name;
    $scope.filteredItems = $scope.items.filter(function(item) {
        return item.class === $scope.chFilters.name;
    });
};

从底部列表调用此点击处理程序：

...<a ng-click="click(link.name)">{{link.name | uppercase}}</a>....

并在顶部列表中显示 filteredItems：

<ul>
  <li ng-repeat="item in filteredItems" ng-class="item.class">{{item.label}}</li>
</ul>

所以这真的只是一个起点，应该扩展它以处理多个过滤器等...

在 Angular js 中按 class 名称过滤匹配的元素。

Filter matched elements by class name in Angular js.

javascript

json

angularjs

ng-repeat