Post
Ask Question

Repeating Multiple Elements In AngularJS

Before reading this article, I highly recommend reading my previous article on AngularJS.

Problem

In my previous article output is like the following.

article output

But what if I want output like the following.

output like

We cannot use ng-repeat because ng-repeat has limitations in that it can only work with single element.

Solution

We can do it two ways. Firstly, we can use table inside the td and do what we want to do and second is using ng-repeat-start and ng-repeat-end. I personally recommend to use the second method because it's clean and we don’t have to write more code.

I am using my previous project so I am not going to do all these things like adding controller, view, js and bootstrap file in our project.

I am making some changes in index.cshtml

Method 1

  1. @{  
  2.     ViewBag.Title = "Index";  
  3.     Layout = "~/Views/Shared/_layout.cshtml";  
  4. }  
  5. <script src="~/Scripts/Data/Data.js"></script>  
  6. <div class="table-responsive" ng-app="myModule" ng-controller="myController">  
  7.     <table class="table" style="width:600px">  
  8.         <tbody>  
  9.             <tr ng-repeat="data in dataList">  
  10.                 <td>  
  11.                     <table>  
  12.                         <tr><th>SN</th><td>{{$index+1}}</td></tr>  
  13.                         <tr><th>Name</th><td ng-bind="data.Name"></td></tr>  
  14.                         <tr><th>Email</th><td ng-bind="data.Email"></td></tr>  
  15.                         <tr><th>Phone</th><td ng-bind="data.Phone"></td></tr>  
  16.                     </table>  
  17.                 </td>  
  18.             </tr>  
  19.         </tbody>  
  20.     </table>  
  21. </div>  
Output

see output

Output is not same as the above. We do some css manipulations for it. As of now I am not giving attention on the css part. If we want the same output as above we need a designer. I am just focused on the output. So I am good enough to display the records.

Method 2
  1. @{  
  2.     ViewBag.Title = "Index";  
  3.     Layout = "~/Views/Shared/_layout.cshtml";  
  4. }  
  5. <script src="~/Scripts/Data/Data.js"></script>  
  6. <div class="table-responsive" ng-app="myModule" ng-controller="myController">  
  7.     <table class="table" style="width:600px">  
  8.         <tbody>  
  9.             <tr ng-repeat-start="data in dataList">  
  10.                 <th>SN</th><td>{{$index+1}}</td>  
  11.             </tr>  
  12.             <tr>  
  13.                 <th>Name</th><td ng-bind="data.Name"></td>  
  14.             </tr>  
  15.             <tr>  
  16.                 <th>Email</th><td ng-bind="data.Email"></td>  
  17.             </tr>  
  18.             <tr ng-repeat-end>  
  19.                 <th>Phone</th><td ng-bind="data.Phone"></td>  
  20.             </tr>  
  21.         </tbody>  
  22.     </table>  
  23. </div>  
Output
result

This is the same output in which we don't need to write extra elements in our html file. Code is clean.

I missed in the last article some properties of ng-repeat. I am going to talk about those properties in this article. There are 6 special properties in ng-repeat. 
  • $index
  • $first
  • $middle
  • $last
  • $even
  • $odd

$index: The default value of $index is 0. I am using $index for the serial number in the current example. It always returns a number.

$first: It returns true or false. It's boolean type. It returns true when element is first. If we have some special css or class on first element, then we use $first.

$middle: It returns true or false. It's boolean type. It returns true when element is in between first and last.

$last: It returns true or false. It's boolean type. It returns true when element is last.

$even: It returns true or false. It's boolean type. It returns true when element is even.

$odd: It returns true or false. It's boolean type. It returns true when element is odd.

Let’s understand with an example. I am using the same demo project. Let’s make a change on index.cshtml

$first

  1. <div style="padding-left:20px;">  
  2.     <table class="table" style="width:600px">  
  3.         <thead>  
  4.             <tr>  
  5.                 <th>SN</th>  
  6.                 <th>Name</th>  
  7.                 <th>Email</th>  
  8.                 <th>Date</th>  
  9.                 <th>Phone</th>  
  10.             </tr>  
  11.         </thead>  
  12.         <tbody>  
  13.             <tr ng-repeat="data in dataList">  
  14.                 <td><span ng-class="$first?'label label-success' : 'label label-warning'">{{$index+1}}</span></td>  
  15.                 <td ng-bind="data.Name"></td>  
  16.                 <td ng-bind="data.Email"></td>  
  17.                 <td ng-bind="data.Date"></td>  
  18.                 <td ng-bind="data.Phone"></td>  
  19.             </tr>  
  20.         </tbody>  
  21.     </table>  
  22. </div>  
Output

run

$middle

Just replace with $middle to $first and see the output.
  1. <td><span ng-class="$middle?'label label-success' : 'label label-warning'">{{$index+1}}</span></td>  
Output

Output

$last

Just replace with $last to $middle and see the output.

last

$even

Just replace with $even to $last and see the output.

even

$odd

Just replace with $odd to $even and see the output.

odd

Hope this article was helpful.


Similar Articles