repeat angular js

I have an angular ng-repeat like bellow,

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

This will create output like below,

<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>

But i need to repeat <div class="row" > also which contain two <div class="col-md-6" in each row.

This output needs like

<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

Is it possible to do with this using ng-repeat ?

---

As mentioned in comment, if you want your row to repeat with each element in mydata , you would need to put ng-repeat on the <div> that contains row.

Its upto you to decide if you want to hardcode the inner <div> like this:

<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>

or use another ng-repeat on it.

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

Where mydata is an array of json with following structure:

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

here's the plunkr

UPDATE:

If you have data like following,

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

and you want to display it like

hello0 hello1

hello2 hello3

in the view, then you would need to make a check for elements occurring at even iterations and print elements at $index and $index+1 . I used $even for the same. but you can also create a custom filter.

<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>    

Heres the updated plunker

---

Create a directive:

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>'
  };
});    

assumption here is that mydata is defined on the scope of the surrounding controller. Use it in your html:

<div data-my-rows><div>

---

Yes ng-repeat is possible to do that.

Here is example code from my project

<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>

I hope this would help

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

上一篇: 如何在此脚本中添加Cookie以缓存样式表更改

下一篇: 重复角度js