重复角度js

我有一个像波纹管一样的角度重复,

<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="col-md-6" <div class="row" >

这个输出需要

<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可以做到这一点吗?


正如在评论中提到的,如果你想让你的行重复mydata每个元素,你需要在包含行的<div>ng-repeat

它取决于你决定是否要像这样硬编码内部的<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'}
                ]

这是普朗克

更新:

如果你有如下的数据,

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

你想要显示它

hello0 hello1

hello2 hello3

在视图中,则需要检查偶数迭代中出现的元素,并在$index$index+1处打印元素。 我$even至用相同的$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>    

这是更新后的抢劫者


创建一个指令:

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>

是的,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>

我希望这会有所帮助

链接地址: http://www.djcxy.com/p/85995.html

上一篇: repeat angular js

下一篇: Optimization for Matrix Multiply (OpenMP)