ng-repeat angular js的问题

Question

我有一个像下面这样的角度 ng-repeat，

<div class="row" >
<div class="col-md-6" ng-repeat="(index,data) in mydata"> 
  <-- my content -->
</div> 
</div>

这将创建如下所示的输出，

<div class="row" >
<div class="col-md-6" ng-repeat="(index,data) in mydata"> 
  <-- my content -->
</div> 
 <div class="col-md-6" ng-repeat="(index,data) in mydata"> 
  <-- my content -->
</div> 
 <div class="col-md-6" ng-repeat="(index,data) in mydata"> 
  <-- my content -->
</div> 
-----------------------
----------------- Etc.
</div>

但我需要重复<div class="row" >，每行也包含两个<div class="col-md-6"。

这个输出需要像

<div class="row" >
<div class="col-md-6" ng-repeat="(index,data) in mydata"> 
  <-- my content -->
</div> 
 <div class="col-md-6" ng-repeat="(index,data) in mydata"> 
  <-- my content -->
</div> 
</div>
 <div class="row" >
<div class="col-md-6" ng-repeat="(index,data) in mydata"> 
  <-- my content -->
</div> 
 <div class="col-md-6" ng-repeat="(index,data) in mydata"> 
  <-- my content -->
</div> 
</div>
<div class="row" >
<div class="col-md-6" ng-repeat="(index,data) in mydata"> 
  <-- my content -->
</div> 
 <div class="col-md-6" ng-repeat="(index,data) in mydata"> 
  <-- my content -->
</div> 
</div>
------- Etc

使用ng-repeat可以做到这一点吗？

Answer 1

因此，您现在有两个答案可以正确解决您的问题并产生您要求的结果，但我想就您的 Bootstrap 结构向您提供一些建议（尽管是不请自来的）。

在 Bootstrap 中，不每 12 个网格单元重复你的行是完全可以接受的。实际上，如果您想同时使用多个响应式列类，例如使用 col-lg-4 和 col-md-6 在大视口上生成 3 列，在中视口上生成 2 列，则无法在重复的内容之间插入行。

由于 col 类使用浮点数和百分比，您不必担心“终止”行。元素将简单地彼此相邻浮动最多 12 个网格单元，然后开始一个新的自然水平“行”。这就是 Bootstrap 的响应式网格的工作原理。

您应该将行用于两个目的：

1. 将列嵌套在列中。请参阅我的answer here 这个主题的视觉解释。或
2. 创建水平的组列。这样做的目的是将元素组合在一起并清除后续列的列浮动。

我的意思是，您最初的 ng-repeat 结构更好，将为您提供更灵活的结果。

Answer 2

如评论中所述，如果您希望您的行与mydata 中的每个元素重复，您需要将ng-repeat 放在包含行的<div> 上。

由您决定是否要像这样对内部 <div> 进行硬编码：

<div class="row" ng-repeat="data in mydata">
  <div class="col-xs-6"> {{data.index}} </div>
  <div class="col-xs-6"> {{data.value}} </div>
</div>

或在其上使用另一个 ng-repeat。

<div class="row" ng-repeat="(index,data) in mydata">
  <div class="col-xs-6" ng-repeat="i in data"> {{i}} </div>
</div> 

mydata 是一个 json 数组，结构如下：

$scope.mydata = [{index:0,value:'hello'},
                 {index:1,value:'hello1'},
                 {index:2,value:'hello2'}
                ]

这是plunkr

更新：

如果你有如下数据，

$scope.mydata = [{value:'hello0'},
                 {value:'hello1'},
                 {value:'hello2'},
                 {value:'hello3'}];

你想像这样显示它

你好0你好1

你好2你好3

在视图中，您需要检查偶数迭代中出现的元素并在$index 和$index+1 处打印元素。我也使用了$even。但您也可以创建自定义过滤器。

<div class="row" ng-repeat="data in mydata">
  <div ng-if="$even">
    <div class="col-xs-6" > {{mydata[$index].value}} </div>
    <div class="col-xs-6" > {{mydata[$index + 1].value}} </div>
  </div>
</div>    

这是更新后的plunker

Answer 3

是的 ng-repeat 可以做到这一点。

这是我项目中的示例代码

<tbody>
<tr ng-repeat="proj in projects>
<td>
{{proj.projectID}}
</td>
<td>
 {{proj.projectName}}
</td>
<td>
{{proj.project.start date  | date:'mediumDate'}}
 </td>
  <td>
  {{proj.projectStatus}}
  </td>
 </tr>
  </tbody>

我希望这会有所帮助

Answer 4

创建指令：

angular.module(....)
.directive('myRows',function(){
  return {
    restrict : 'A',
    template : '<div class="row"><div class="col-md-6" ng-repeat="(index,data) in mydata"><-- my content --></div></div>'
  };
});    

这里的假设是 mydata 是在周围控制器的范围内定义的。 在你的 html 中使用它：

<div data-my-rows><div>