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>

これらは、応答性のフレキシボックスグリッドに表示されている、と私は、similar to Netflixはすぐにクリックした項目の下の行に、表示されるようにプレーヤーをトリガする機能startPlayingが欲しい欲しいです。

は、グリッドが応答性であることを考えると、クリックされた要素の列の終わりに<li>要素のインデックスを取得し、<li>秒の数：

は私がする方法について困惑しています各行のビューポートで変更されます。

ng-repeatに特定のインデックスの後に新しいDOM要素を挿入するには、angleを指定します。

私はwindow.getComputedStyle(ul).widthで、親の幅から行あたりの<li>秒数を推測することができたとしますが、これはロータリーようです。より良い方法がありますか？

ありがとうございます！

出典

2017-07-28 parasomnist

-1

次で李のインデックスにアクセスすることができます

{{$index}}

かさえ：

{{podcasts.indexOf(podcast)}}

あなたのクリックイベントにそれを与えた場合は、対応するに要素を追加することができます次のようになります。

<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要素を挿入する最も賢明な方法はありますか？

答えて

関連する問題