generating a series of buttons in two rows using angular ng-repeat

Question

I have a angular controller that defines an array of elements as follows:

 $scope.tasks = [{val=1},{val=2},{val=3},{val=4},{val=5},{val=6},{val=7},{val=8},{val=9},{val=10}];

I want to generate a series of elements for this and I can do this as follows:

<div ng-repeat-"button in tasks">
   <button id = {{ $index}} value='{{task.val}}'></button>
</div>

However, I want the buttons to appear in two rows - like 1-5 in first row and 6-10 in the 2nd row. I think I have to use $index for this, but now sure how to do it.

Can someone help?

Have you considered just changing the CSS on the buttons? i.e. give the div a width of 100%, then give each button 20%, should give you 2 rows of 5... — M21B8
– M21B8, Commented Jul 4, 2014 at 9:11

maurycy · Accepted Answer · 2014-07-04 11:26:20Z

2

You can do it like that

<div ng-repeat-"button in tasks">
   <button id = {{$index}} value='{{button.val}}'></button><br ng-if="$index == 5">
</div>

edited Jul 4, 2014 at 11:26

answered Jul 4, 2014 at 9:06

maurycy

8,4201 gold badge30 silver badges44 bronze badges

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

2 Comments

M21B8 Over a year ago

surely that would have to be == or === instead of =, otherwise it'll set the $index to 5?

maurycy Over a year ago

Yes, ofcourse (no matters what historians claims, BC really means Before Coffee and this answer was written BC)

Srinath Mandava · Accepted Answer · 2014-07-04 08:58:20Z

0

It would be better to show it in a table... Divide the array into a 2D array with required no. of cols...

var tempArry = angular.copy($scope.tasks);
var cols = 5; //in your case 5
while (tempArry.length > 0)
    $scope.DisplayArray.push(tempArry.splice(0, cols));

and the html...

<table>
<tr ng-repeat="row in DisplayArray track by $index">
  <td ng-repeat="col in row track by $index">
      <button  value='{{col.val}}'></button>
   </td>
</tr>
</table>

answered Jul 4, 2014 at 8:58

Srinath Mandava

3,4722 gold badges27 silver badges37 bronze badges

Collectives™ on Stack Overflow

generating a series of buttons in two rows using angular ng-repeat

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related