Angularjs ng-repeat和子元素

Angularjs ng-repeat and child elements

本文关键字：元素 ng-repeat Angularjs      更新时间：2023-09-26

我正在尝试每n个元素插入一个<br/>来实现这样的事情(使用ng-repeat和ng-if="！($index% 2("(：

<div class="container">
    <div>
        <span>1</span>
        <span>2</span>
        <br/>
        <span>3</span>
    </div>
</div>

我想我可以模仿我过去对<ul/>元素使用 ng-repeat 的方式，如下所示：

<div class="container">
    <ul ng-repeat="item in list">
        <li>{{item}}</li>
    </ul>
</div>

生成如下列表：

<div class="container">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

然而，当我尝试做这样的事情时：

<div class="container">
    <div ng-repeat="item in list">
        <span>{{item}}</span>
    </div>
</div>

我从<ul/>用例中得到了这个不同的结果：

<div class="container">
    <div>
        <span>1</span>
    </div>
    <div>
        <span>2</span>
    </div>
    <div>
        <span>3</span>
    </div>
</div>

问题是双重的：

  • 为什么<ul/>上的 ng-repeat 指令的行为不同
  • 如何在不将每个跨度包装在div 中的情况下拥有多个跨度元素然后中断？

https://docs.angularjs.org/api/ng/directive/ngRepeat

ngRepeat 指令从 收集。每个模板实例都有自己的范围，其中给定的 循环变量设置为当前集合项，并设置 $index 到项目索引或键。

在您的循环中，您的"item"具有以下局部变量：$index、$first、$middle、$last、$even$odd。每个 $index 都返回一个布尔值，告诉您该项是否$odd。另请查看指令ngClassEven。

ng-repeat 行为等于任何标签，也许 ul 的前提会造成混乱，

请看下一个示例：

http://plnkr.co/edit/ig766DNNlQXihNS5ZGdY?p=preview

IM 已分离：

 <ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="friend in friends">

和

<legeng>ul - ng repeat</legeng>
<ul class="example-animate-container" ng-repeat="friend in friends">

试试这个。

<div ng-repeat="num in [1,2,3,4,5,6]">
  <div>{{num}}</div>
  <div ng-if="$index%2">whatever you want</div>
</div>

结果看起来像这样。

1
2
whatever you want
3
4
whatever you want
5
6
whatever you want

更新：

如果要每隔 n 个<span>插入一次<br>，则可以将 HTML 更改为以下内容：

<div id="container">
    <span ng-repeat="item in list">{{item}}
          <br ng-if="$index % 2">
     </span>
</div>

在Firefox，Chrome和Internet Explorer中测试，结果如下所示：

12
34
56

您所要做的就是删除周围的div 元素，然后将您的 html 更改为以下内容(实时预览：http://codepen.io/larryjoelane/pen/qbJXJm(。ng-repeat 指令复制父元素中包含的子元素数。示例中的<li>元素不包含任何子元素。换句话说，默认情况下<li>元素是<ul>元素的子元素。 但是，默认情况下，<span>元素不是<div>元素的子元素。 当您将 ng-repeat 用于其他元素(如 <table> 元素及其<tr>和<td>标记(时，您将看到类似的行为。

.HTML： 

<div ng-app="app" ng-controller="spans">
   <div id="container">
        <span ng-repeat="item in list">{{item}}
          </span>
  </div> 
      </div>

Angular/JavaScript：

angular.module("app", []).controller("spans", ["$scope", function($scope) {
  $scope.list = [1, 2, 3, 4, 5, 6];
}]);

如果您希望每个跨度都有一个换行符，请应用以下 CSS：

#container span {
  display: block;
}
相关文章：