javascript - 根据用户选择过滤 ng-repeat

Question

我目前正在研究音乐目录并尝试实现允许用户从艺术家和流派列表中过滤目录的功能

列表:

    <ul class="artists">
        <li class="title">
            <h5>Artists</h5>
            <ul class="sub-menu">
                <li ng-repeat="artist in music | orderBy:'-views'">
                    <p ng-click="select(artist.artist)">{{artist.artist}}</p>
                </li>
            </ul>
        </li>
    </ul>

我曾尝试构建一个自定义过滤器，但无法完全理解这个概念，我设法做到了 - 是从所选选择中获取值(value)

    // value from ng-click
    $scope.select = function(value){
        filterBy = value;
    }

我知道我可以添加过滤器:通过添加 ng-repeat

ng-repeat="artist in music | filter: {artist:'artistName' | orderBy:'-views'"}

但我如何将 artist: 'value' 更改为从列表中选择的值

这是我要过滤的主要区域

    <div class="item" ng-repeat="artist in music | orderBy:'-views'"> 
        <div class="img">
            <img ng-src="{{artist.image}}"/>
        </div>
        <div class="info">
            <h6>{{artist.artist}}</h6>
            <p>{{artist.songName}}</p>
        </div>
    </div>

当 View 加载时，应显示所有项目，然后如果用户需要，可以从列表中选择艺术家或流派以过滤到该结果。我的想法是也许将自定义过滤器功能放在点击功能中，这样当用户从列表中选择时，点击功能中的值可以解析为自定义过滤器并使用正确的值更新过滤器。但是，我无法实现这一点。

我是 angular.js 的新手，所以如果我没有完全正确地解释它，这里是一个 JSfiddle 复制我的项目。

http://jsfiddle.net/0n2qptg6/5/

在此先感谢您的任何帮助、建议、批评

Answer 1

Demo

您需要将过滤器分配给 $scope，以便它可以用作您的音乐专辑列表的过滤器:

$scope.selectArtist = function(value){
    //pass from ng-click
    $scope.filterByArtist = value;
    alert(filterBy);
}

$scope.selectGenre = function(value){
    //pass from ng-click
    $scope.filterByGenre = value;
    alert(filterBy);
}

然后，将过滤器应用于您的音乐专辑列表:

<div class="item" ng-repeat="artist in music | 
   filter:{ artist: filterByArtist, genre: filterByGenre } |
   orderBy:'-views'">