在 ng-repeat 中的特定点插入 DOM 元素的最明智方法？
Posted
技术标签:
【中文标题】在 ng-repeat 中的特定点插入 DOM 元素的最明智方法？【英文标题】：Most sensible way to insert DOM element at specific point within ng-repeat? 【发布时间】：2018-01-04 17:33:50 【问题描述】：我希望使用 AngularJS 创建一个播客播放器应用程序。
到目前为止，我已经使用 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.durationm</p>
</li>
</ul>
这些显示在响应式弹性框网格中，我希望函数 startPlaying 触发播放器出现在被点击项目 similar to Netflix 正下方的行上。
我很困惑如何：
-
获取被点击元素行尾的
<li>元素的索引，假设网格是响应式的并且每行上<li>s的数量随着视口。
告诉 Angular 在 ng-repeat 中的特定索引之后插入一个新的 DOM 元素。
我想我可以用window.getComputedStyle(ul).width 从父级的宽度推断出每行<li>s 的数量，但这似乎是迂回的。有没有更好的办法？
谢谢！
【问题讨论】：
【参考方案1】：您可以通过以下方式访问 li 的索引：
$index
甚至：
podcasts.indexOf(podcast)
如果你将它输入到你的点击事件中，你可以在相应的函数中添加一个元素，如下所示：
<li ng-repeat="podcast in podcasts" ng-click="startPlaying($index)">
但是你需要选择正确的元素，所以给 li 一个类：
<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> 替换为您要附加的元素即可。
【讨论】：
以上是关于在 ng-repeat 中的特定点插入 DOM 元素的最明智方法？的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS：不要在 DOM 更改时运行 ng-repeat
Angular JS——将ng-repeat应用于异步添加到DOM的东西
mui 使用入口点插入范围阴影 DOM 样式时选择未设置样式的下拉选项