Question

当用户选择列表上的项目时，我正在尝试更改图标。我设法在点击项目时更改图标，但是如果用户点击其他项目我想要将prev项目更改为初始状态，如播放音乐并暂停。

我的模板：

Sub1

Answer 1

您可以在另一个变量中跟踪所选项目（例如其itemId或$ index）。说selectedItemId。这对于ng-repeat应该是常见的，而不是为每个ng-repeat设置初始化。

点击该项目设置此变量。

<button class="button button-positive" ng-click="selectItemToPlay(item);item.playing = !item.playing;selectedItemId=item.Id">

如果所选项目ID与点击的项目ID不同，则将其他项目设置为初始状态。

<i ng-class="{'ion-pause' : item.playing, 
            'ion-play' : !item.playing || selectedItemId !== item.id}"> </i>

//一起

<div class="list">
    <a ng-repeat="item in items"
       class="item item-thumbnail-left item-button-right" ng-init="item.playing = false">
        <img ng-src="{{ item.user.avatar_url }}">
        <h2>{{ item.title }}</h2>
        <h4>{{ item.artist }}</h4>
        <button class="button button-positive" ng-click="selectItemToPlay(item);item.playing = !item.playing;selectedItemId=item.Id">
            <i ng-class="{'ion-pause' : item.playing, 
            'ion-play' : !item.playing || selectedItemId !== item.id}"> </i>
        </button>
    </a>
</div>

Answer 2

 <i ng-class="{'ion-pause' : item.playing,
               'ion-play' : !item.playing}">
 </i>

或者

 <i ng-class="{item.playing ? 'ion-pause' : 'ion-play'}">
 </i>

Answer 3

我认为你正在寻找ngClass指令，它有条件地根据表达式设置CSS类。对于您的代码：

 <i ng-class="{'ion-pause': item.playing, 'ion-play': !item.playing}"></i>

如何更改ng-repeat上的图标

3 个答案: