Trouble with ng-repeat angular js

Question

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 usingng-repeat?

Its obvious that 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. Choice of writing the inner <div> is upto you(weather to hardcode it or use another ng-repeat). Please mention full structure of mydata and the way you want to display it — nalinc
– nalinc, Commented Jun 29, 2015 at 11:24
@Patrick All the answers are similar ,And that was the answer i expected.I spend one full day for this — Shijin TR
– Shijin TR, Commented Jun 29, 2015 at 11:50

nalinc · Accepted Answer · 2015-06-29 12:33:42Z

4

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

edited Jun 29, 2015 at 12:33

answered Jun 29, 2015 at 11:38

nalinc

7,43327 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shijin TR Over a year ago

How can i show data ?I don't want to create elements with dummy data

nalinc Over a year ago

What sort of data do you have ? I am using the following values for mydata in plunkr. $scope.mydata = [{index:0,value:'hello'},{index:1,value:'hello1'},{index:2,value:'hello2'}]. Can you give the structure of mydata (if possible, with 1-2 items) ?

Shijin TR Over a year ago

$scope.mydata = [{value:'hello'},{value:'hello1'},{value:'hello2'},{value:'hello3'}]; then hello - hello1 next row hello2-hello3 etc

nalinc Over a year ago

@Shijin: is this what you are looking for ?

Jan Peter · Accepted Answer · 2015-06-29 11:36:23Z

0

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>

answered Jun 29, 2015 at 11:36

Jan Peter

3907 silver badges17 bronze badges

Comments

vijay kani · Accepted Answer · 2015-06-29 12:26:47Z

0

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

answered Jun 29, 2015 at 12:26

vijay kani

1408 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:07:57Z

So, you now have two answers that correctly address your question and will produce the results you requested, but I wanted to give you some advice (albeit unsolicited) about your Bootstrap structure.

In Bootstrap, it is perfectly acceptable to not repeat your rows for every 12 grid units. In fact, if you want to use multiple responsive column classes together, such as using col-lg-4 and col-md-6 to produce 3 columns on large viewports and 2 on medium viewports, you cannot insert rows between your repeated content.

Since col classes use float and percentages, you don't have to worry about "terminating" the row. Elements will simply float next to one another up to 12 grid units and then start a new natural horizontal "row." That is how Bootstrap's responsive grid works.

You should use rows for two purposes:

To nest columns inside of columns. See my answer here for a visual explanation of this topic. or
To create horizontal groups of columns. This has the purpose of grouping elements together and clearing column floats for subsequent columns.

What I'm saying is that your initial ng-repeat structure was better and will provide you with a more flexible outcome.

Collectives™ on Stack Overflow

Trouble with ng-repeat angular js

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related