在某些事件後在ng-repeat中爲元素添加一個類

我在製作播放列表。我有這個NG-重複在當前歌曲突出在某些事件後在ng-repeat中爲元素添加一個類

<div ng-repeat="song in songs_list"> 
    <div ng-class="{'true':'current-song'}[song == current_song]"> 
    {{song.title}} 
    </div> 
</div>

現在JS我改變current_song值。我想將類current-song應用於當前正在播放的新元素。

來源

2016-07-16 Swapnesh Khare

是什麼'current_song'？ – C2486

它的一個範圍變量包含當前正在播放的歌曲，它具有歌曲標題，url –

這應該工作：http://jsfiddle.net/d9Ld4ewx/，檢查您的current_song變量爲Rishi建議 – apieceofbart

你應該寫這樣的

<div ng-repeat="song in songs_list"> 
<div ng-class="{'current-song': song == current_song}"> 
    {{song.title}} 
</div> 
</div>

來源

2016-07-16 08:52:44

宋集$ scope.current_song的變化，以新的歌曲，並在HTML：

<div ng-repeat="song in songs_list"> 
    <div ng-class="{'current-song':song===current_song}"> 
    {{song.title}} 
    </div> 
</div>

來源

2016-07-16 08:52:57

使用此語法，試着用這個

<div ng-repeat="song in songs_list"> 
    <div ng-class="{'current-song':song.title == current_song}"> 
    {{song.title}} 
</div> 
</div>

我建議，使用song.id而不是song.title並保持ID爲cu rrent_song作爲歌曲ID。

來源

2016-07-16 08:55:24 C2486

我剛剛注意到，我是什麼did也在工作，但這個類不是即時應用的，而是當我單擊頁面上的一個輸入框，然後在其外面單擊時，該類將應用於下一個元素。我認爲這與消化週期有關 –

解決了它，這是由於消化週期沒有被解僱，所以沒有得到更新，直到我做了一些行動來解僱它 –

好的，還檢查給小提琴，http：// jsfiddle .net/d9Ld4ewx/ – C2486

方法ng-repeat的工作原理是，它創建一個從當前範圍原型繼承的子範圍。因此，內部值current_song不會更新。我不想再次重複答案，爲什麼它不工作，你可以找到explanation here。您必須使用Dot Rule才能獲得ng-repeat,&中正確選擇的current_song值，同時有條件時應將其與unique_id進行比較（假設您在此具有id prop）。

$scope.model = { 
    current_song: null 
};

HTML

<div ng-repeat="song in songs_list"> 
    <div ng-class="{'current-song': song.id == model.current_song.id}"> 
    {{song.title}} 
    </div> 
</div>

來源

2016-07-16 09:23:01

嘿，隊友，有一些語法錯誤..看看：D – developer033

感謝您的隊友，你可以提出編輯，我很樂意接受它。 –

事實是，我的編輯會自動更新您的答案，未經您的許可..這就是爲什麼我沒有..但讓我糾正一件事：D – developer033

在某些事件後在ng-repeat中爲元素添加一個類

回答

相關問題