根据用户选择过滤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 from ng-click
    $scope.select = function(value){
        filterBy = value;
    }

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

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

但是我如何更改艺术家：'值'到列表中使用的选项

这是我想要过滤的主要区域

    <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>

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

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

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

提前感谢任何帮助，建议，批评

Answer 1

一种选择是拥有一个过滤器对象，并在单击不同的元素时更新它。 当然使用ng-repeat标签中的过滤器。

<div class="item" ng-repeat="artist in music | filter:filteredBy | orderBy:'-views'">

还将方法更改为以下内容

$scope.selectArtist = function(value){
   //pass from ng-click
    $scope.filteredBy.artist = value;
}

$scope.selectGenre = function(value){
    //pass from ng-click
    $scope.filteredBy.genre = value;
}

查看更新的小提琴以获取示例

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

当然，如果你愿意，你可以尝试优化它，但这应该有效

Answer 2

演示

您需要将过滤器分配给$ 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'">

Answer 3

首先，过滤器参数是可绑定的。 这意味着你可以做这样的事情。

ng-repeat="artist in music | filter: {artist: path.to.artistSerachTerm | orderBy:'-views'"} 。

以下是使用文本输入和选择列表作为过滤器的示例。 但您可以将想法扩展为复选框列表以及选择下拉列表。

 var app = angular.module('main', []); app.filter('unique', function() { return function (arr, field) { var o = {}, i, l = arr.length, r = []; for(i=0; i<l;i+=1) { o[arr[i][field]] = arr[i]; } for(i in o) { r.push(o[i]); } return r; }; }); app.controller('MainCtrl', function($scope, $http, $filter) { $scope.music = [ { "artist": "noisia", "songName": "machine gun", "genre": "Drum and Bass", "views": "19" }, { "artist": "etnik", "songName": "n7", "genre": "Techno", "views": "30" }, { "artist": "Jack U", "songName": "To U", "genre": "RnB", "image": "images/cover_3.jpg", "views": "32" }, { "artist": "Makonnen", "songName": "Tuesday", "genre": "Electronic", "image": "images/cover_4.jpg", "views": "72" }, { "artist": "Dillon Francis", "songName": "When We Were Young", "image": "images/cover_5.jpg", "views": "54" }, { "artist": "Justice", "songName": "Stress", "image": "images/cover_6.jpg", "views": "93" } ]; $scope.filteredBy = { artist: '', genre: '' }; $scope.clear = function() { $scope.filteredBy.artist = ''; $scope.filteredBy.genre = ''; } }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script> <div ng-app="main" ng-controller="MainCtrl"> <div class="nav"> <p> <label for="byArtistInput">Choose Artist:</label> <input id="byArtistInput" type="text" ng-model="filteredBy.artist" /> <label for="byGenreInput">Choose genre:</label> <select id="byGenreInput" ng-model="filteredBy.genre" ng-options="song.genre as song.genre for song in music | unique: 'genre'"></select> <button type="button" ng-click="clear()">clear</button> </p> </div> <div class="clear"></div> <div class="content"> <div class="item" ng-repeat="artist in music | filter:filteredBy | orderBy:'-views'"> <div class="border"> <!-- | filter: {artist:'etnik'} --> <div class="img"></div> <div class="sub-info"> <h4>{{artist.artist}}</h4> <p>{{artist.songName}}</p> </div> </div> </div> </div> </div>