Question

我是棱角分明的新手，我正在努力做到以下几点：

我在里面有一个ul。假设我有15个李，我想在第4和第12李之后追加一个div。我怎么能在角度上做到这一点？这是我的代码的样子：

<ul class="story">
    <li id="pos+{{$index}}" ng-repeat= "item in stories" ng-if="$index!==5 && $index!==13" >
    <div id="xyz">.... </div>
    <div id = "pqr"> ... </div>
  </li>
</ul>

如下所示：最初只能看到7个li。如果要看到更多＆＃34;显示更多＆＃34;被击中，将会看到更多7个。

li1 li2
li3 li4  **li5**
li6  li7 

Show more 

li8 li9 li10

li11 li12 **li13**

li14 li15

代替li5和li13，我想添加两个不同id的单独div。有没有简单的方法呢？

<div id="first"> </div>  This will be in li5 position ie next to li4
<div id="second"> </div>  This will be in li13 position ie next to li12

Answer 1

您可以使用ng-repeat-start结合ng-repeat-end以及条件ng-if来检查索引。

将使用limitTo过滤器来设置显示和开始点的数量。对于演示，它只是在0或7开始切换...留给你添加更好的逻辑

HTML

<li ng-repeat-start="item in items | limitTo:7:start">{{item.item}}</li>
<li ng-repeat-end ng-if="$index==3" ng-click="toggleStart()">Change Start</li>

JS

 $scope.start =0;

 $scope.toggleStart = function(){
     $scope.start = $scope.start === 0 ? 7 :0;
 }

DEMO

Answer 2

理想的方法是在控制器中预处理数据，将其映射到包含所有状态的数组：

src

然后在视图中，您可以轻松地使用$('#book1 .picture').attr('src', book1.pictureURL);进行迭代，并使用var stories = [ {story: storyData, visible: true, div: false}, {story: storyData, visible: true, div: false}, {story: storyData, visible: true, div: false}, {story: storyData, visible: true, div: false}, {story: storyData, visible: true, div: true}, ... ]; $scope.stories = stories;之类的触发器在div与非div之间切换，entry in stories在可见之间切换 - 立即与当点击show-more时。

您可以使用按钮触发器ng-show="entry.div"，它可以处理此数据，以便在下一个ng-show="entry.visible"记录中将可见状态从false切换为true，从隐藏的第一条记录开始。

将div添加到角度

2 个答案: