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> {{streams.nbr}} {{streams.stream}} {{streams.description}} <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" /> </li>

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

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

1 个答案: