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.

But what if I want output like the following.

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

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_layout.cshtml";
}
<script src="~/Scripts/Data/Data.js"></script>
<div class="table-responsive" ng-app="myModule" ng-controller="myController">
<table class="table" style="width:600px">
<tbody>
<tr ng-repeat="data in dataList">
<td>
<table>
<tr><th>SN</th><td>{{$index+1}}</td></tr>
<tr><th>Name</th><td ng-bind="data.Name"></td></tr>
<tr><th>Email</th><td ng-bind="data.Email"></td></tr>
<tr><th>Phone</th><td ng-bind="data.Phone"></td></tr>
</table>
</td>
</tr>
</tbody>
</table>
</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

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_layout.cshtml";
}
<script src="~/Scripts/Data/Data.js"></script>
<div class="table-responsive" ng-app="myModule" ng-controller="myController">
<table class="table" style="width:600px">
<tbody>
<tr ng-repeat-start="data in dataList">
<th>SN</th><td>{{$index+1}}</td>
</tr>
<tr>
<th>Name</th><td ng-bind="data.Name"></td>
</tr>
<tr>
<th>Email</th><td ng-bind="data.Email"></td>
</tr>
<tr ng-repeat-end>
<th>Phone</th><td ng-bind="data.Phone"></td>
</tr>
</tbody>
</table>
</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

<div style="padding-left:20px;">
<table class="table" style="width:600px">
<thead>
<tr>
<th>SN</th>
<th>Name</th>
<th>Email</th>
<th>Date</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in dataList">
<td><span ng-class="$first?'label label-success' : 'label label-warning'">{{$index+1}}</span></td>
<td ng-bind="data.Name"></td>
<td ng-bind="data.Email"></td>
<td ng-bind="data.Date"></td>
<td ng-bind="data.Phone"></td>
</tr>
</tbody>
</table>
</div>