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

但是如何将艺术家：＆＃39;值＆＃39; 更改为从列表中选择的内容

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

    <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

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

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

＆＃13;

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 = '';
    }
});

＆＃13;

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

＆＃13;

根据用户选择过滤ng-repeat

3 个答案: