AngularJSリストにクラスを追加 - 一致しないアイテム

Question

私のリストにSelect-Fieldを持つフィルタを作成しました。

<div ng-controller="streamsController" class="stream-list-wrap"> 

     <div class="form-field"> 
     <select id="selectedGenre" ng-model="selectedGenre" ng-options="genre for genre in filteredGenres" ng-change="resetFilter()" > 
     </select> 
     </div> 

     <ul class="stream-list" id="stream-list"> 
      <li ng-repeat="streams in jsonDataStream | filter:{genre: selectedGenre} | setGenres"> 

       <audio id="player_{{streams.nbr}}" preload="none" controls="controls"> 
       <source src="{{streams.source}}" type="{{streams.type}}" /> 
       </audio> 

       <span class="player-wrap"> 

       <span class="player-item player-number"> 
       <span>{{streams.nbr}}</span> 
       </span> 

       <span class="player-item player-info"> 
       <span><strong >{{streams.stream}}</strong><br /> 
       {{streams.description}}</span> 
       </span> 

       <span class="player-item player-ctrl"> 
       <span id="playpause_{{streams.stream}}" ng-click="playPause($event, 'player_'+streams.nbr, this)" class="play-button cv-icon-box-icon icon-play"></span> 
       <input type="range" class="volume" value="100" id="volume_{{streams.nbr}}" data-player="player_{{streams.nbr}}" onchange="volumeChange(this)" step="0.1" min="0" max="1" /> 
       </span> 

       </span> 

      </li> 
     </ul> 
    </div> 

いつもすべての結果が見たいです。しかし、項目がフィルタ上で一致しない場合は、影響を受ける項目の幅を無効にしたいと思います。

{ 
    "stream": "Stream Title", 
    "description": "lorem ipsum dolor", 
    "source": "http://domain.strem.com", 
    "type": "audio/mpeg", 
    "nbr": "123", 
    "genre": ["genre_01", "genre_02", "genre_03"] 
    } 

Answer 1

フィルタ

angular.module('yourAppModuleName').filter('genreFilter', ['$filter', function ($filter) { 
     return function (jsonDataStream, selectedGenre) { 
      var filtered = []; 
      angular.forEach(jsonDataStream, function(item) { 
       if(item.genre.indexOf(selectedGenre) != -1){ 
        item.disable = true; 
        filtered.push(item); 
       } 
       else { 
        item.disable = false; 
        filtered.push(item); 
       } 
      }); 
      return filtered; 
     } 
}]); 

HTML

<li ng-repeat="streams in jsonDataStream | genreFilter: selectedGenre | setGenres" ng-class="{'disabled':streams.disable}"> 

        <audio id="player_{{streams.nbr}}" preload="none" controls="controls"> 
        <source src="{{streams.source}}" type="{{streams.type}}" /> 
        </audio> 

        <span class="player-wrap"> 

        <span class="player-item player-number"> 
        <span>{{streams.nbr}}</span> 
        </span> 

        <span class="player-item player-info"> 
        <span><strong >{{streams.stream}}</strong><br /> 
        {{streams.description}}</span> 
        </span> 

        <span class="player-item player-ctrl"> 
        <span id="playpause_{{streams.stream}}" ng-click="playPause($event, 'player_'+streams.nbr, this)" class="play-button cv-icon-box-icon icon-play"></span> 
        <input type="range" class="volume" value="100" id="volume_{{streams.nbr}}" data-player="player_{{streams.nbr}}" onchange="volumeChange(this)" step="0.1" min="0" max="1" /> 
        </span> 

        </span> 
    </li> 

あなたが代わりに "selectedGenre" に、この使用して$ウォッチを行うことができます

これらは次のようになり、私のJSONですフィルを書くことr。これがあなたのために働くことを願っています。ありがとう