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

问题：

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

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

目标：

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

我不能使用ng模型(因为这是为某些表单元素保留的(。

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

这是我的角度代码：

/* 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上发现的另一个问题(。不幸的是，小提琴有点乱，里面有一些无关的代码

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中重新创建了这个功能，但我认为在有角度的应用程序中实现有角度的解决方案会更好。

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

这是我的(凌乱的(jsfiddle