...">
Geek Answers Handbook

Problem with ng-repeat angular js

I have angular ng-repeat as below,

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

This will produce the output as shown 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 also repeat the <div class="row" > , which contain two <div class="col-md-6" in each row.

This conclusion is needed as

 <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

Can this be done with ng-repeat ?

+7
javascript html angularjs
source share
4 answers

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

To decide whether you want to hardcode the internal <div> as follows:

 <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 a json array with the following structure:

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

here plunkr

UPDATE:

If you have the following data,

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

and you want to display it as

hello0 hello1

hello2 hello3

in the view, then you will need to check the elements that occur at equal iterations and print elements in $index and $index+1 . I used $even for the same. but you can also create your own 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>

Updated plunker is displayed here.

+4
source share

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

Mydata is assumed to be defined in the area of ​​the surrounding controller. Use it in your html:

 <div data-my-rows><div>
0
source share

So, you now have two answers that correctly reflect your question and will produce the results that you asked for, but I would like to give you some advice (albeit unsolicited) about your Bootstrap structure.

In Bootstrap, it's perfectly acceptable not to repeat your lines for every 12 grid blocks. In fact, if you want to use several cool column classes together, for example using col-lg-4 and col-md-6 to create 3 columns in large viewports and 2 in medium viewports, you cannot insert rows between duplicate content.

Since col classes use float and percentages, you don’t have to worry about line endings. Elements will simply float next to each other up to 12 grid blocks, and then launch a new natural horizontal “row”. Here's how the Bootstrap boot grid works.

You should use strings for two purposes:

  • Insert columns inside columns. See my answer here for a visual explanation of this topic. or
  • To create horizontal group columns. This is to combine the elements together and clear the columns for subsequent columns.

I want to say that your initial ng-repeat structure was better and would provide you with a more flexible result.

0
source share

Yes ng-repeat can be done.

Here is a sample 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>

Hope this helps

0
source share

More articles:


All Articles