AngularJS将类添加到列表 - 不匹配的项

Question

我在列表中创建了一个带有选择字段的过滤器。

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

我想每次看到所有结果。但是如果某个项目在过滤器上不匹配，我想要禁用受影响的项目宽度类。

这些是我的JSON看起来像：

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

你可以使用$ watch;＆quot; selectedGenre＆＃34;而不是写一个过滤器。希望这对你有用，进一步的帮助让我知道。感谢