在ng-repeat中的特定點插入DOM元素的最明智的方法是什麼？

我正在尋找使用AngularJS創建播客播放器應用程序。在ng-repeat中的特定點插入DOM元素的最明智的方法是什麼？

到目前爲止，我已經有一個播放列表，可以播放，使用ng-repeat，看起來像這樣。

<ul ng-controller="list"> 
    <li ng-repeat="podcast in podcasts" ng-click="startPlaying()"> 
    <p>{{podcast.created_time | date}}</p> 
    <div class="podcast-icon" style="background-image:url('{{podcast.icon}}')"> 
     <i class="fa fa-play"></i> 
    </div> 
    <h3>{{podcast.name}}</h3> 
    <p>{{podcast.duration}}m</p> 
    </li> 
</ul>

這些被顯示在響應Flexbox的網格，我想我要的功能startPlaying觸發玩家出現，該行立即點擊下面的項目，similar to Netflix。

我很困惑如何：

在單擊元素的行的末尾，獲取<li>元素的指數考慮到電網響應和<li> S中的數在每一行上都隨着視口而改變。

告訴angular在ng-repeat中的特定索引之後插入一個新的DOM元素。

我想我可以從父的寬度推斷的每行<li> S中的人數，window.getComputedStyle(ul).width，但這似乎迂迴。有沒有更好的辦法？

謝謝！

來源

2017-07-28 parasomnist

-1

您可以通過以下方式聯繫李的指標：如果你喂的是到點擊事件以後就可以在相應的添加元素

{{podcasts.indexOf(podcast)}}

：

{{$index}}

甚至函數，如下所示：

<li ng-repeat="podcast in podcasts" ng-click="startPlaying($index)">

但是，您需要選擇正確的元素，所以給一個類：

<li class="podcast" ng-repeat="podcast in podcasts" ng-click="startPlaying($index)">

然後在你的startPlaying功能通過索引選擇元素，並添加你的元素：

$scope.startPlaying = function(index) { 
    var podcasts = document.getElementsByClassName('podcast') 
    var currentPodcast = podcasts[index] 
    angular.element(currentPodcast).append('<html></html>'); 
}

只是要追加的元素替換<html></html>。

來源

2017-07-28 15:25:03

在ng-repeat中的特定點插入DOM元素的最明智的方法是什麼？

回答

相關問題