根据用户选择过滤 ng-repeat

Question

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

榜单：

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

我曾尝试构建一个自定义过滤器，但无法完全理解这个概念，我设法做到了 - 从所选的 selection
中获取值
// value from ng-click $scope.select = function(value){ filterBy = value; }

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

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

但我如何将 艺术家：'value' 更改为曾经使用列表 select 的

这是我要过滤的主要区域

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

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

我对 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;
}

查看更新后的 fiddle 示例

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

当然，如果您愿意，您可以尝试对其进行一些优化，但这应该可行

Answer 2

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

Answer 3

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

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

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

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>

根据用户选择过滤 ng-repeat

Filter ng-repeat based on user selection

javascript

filtering

web-applications

dynamic

angularjs