Currently, I am developing a music catalog and working on implementing a feature that allows users to filter the catalog based on a list of artists and genres
The list:
<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>
I attempted to create a custom filter but found it challenging to grasp the concept. All I managed to do was extract the value from the selected option.
// value from ng-click
$scope.select = function(value){
filterBy = value;
}
I understand I can use the filter in ng-repeat by adding
ng-repeat="artist in music | filter: {artist:'artistName' | orderBy:'-views'}"
However, how do I change the artist: 'value' based on what the user selects from the list?
This is the main area where I am focusing on filtering:
<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>
Initially, all items should be displayed when the view loads, and then the user can select an artist or genre from the list to filter the results. My thought was to include the custom filter function inside the click function so that the value from the click function could be passed into the custom filter and update the filter with the correct value. However, I struggled to implement this.
Being new to angular.js, if my explanation isn't clear enough, here is a JSfiddle replicating my project.
http://jsfiddle.net/0n2qptg6/5/
Thank you in advance for any assistance, suggestions, or feedback.