问题描述
我试图在用户选择列表中的项目时更改图标。我设法在单击该项目时更改图标，但是如果用户单击其他项目，我想将上一个项目更改为初始化状态（例如播放音乐和暂停）会出现问题。
我的模板：
<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">
<i class="{{item.playing == true && 'ion-pause' || 'ion-play'}}"></i>
</button>
</a>
</div>
1楼
Bharat
1
已采纳
2015-07-26 18:39:39
您可以在另一个变量中跟踪所选项目（例如其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>
2楼
vinayakj
0
2015-07-26 17:55:47
<i ng-class="{'ion-pause' : item.playing,
'ion-play' : !item.playing}">
</i>
要么
<i ng-class="{item.playing ? 'ion-pause' : 'ion-play'}">
</i>
3楼
Christian Yang
0
2015-07-26 17:56:51
我认为您正在寻找指令，该指令根据表达式有条件地设置CSS类。 对于您的代码：
<i ng-class="{'ion-pause': item.playing, 'ion-play': !item.playing}"></i>