var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.BankNames =[
{"bankId":1,"bankName":"ICICI Bank"},
{"bankId":2,"bankName":"HDFC Bank"},
{"bankId":3,"bankName":"HSBC Bank"},
{"bankId":4,"bankName":"Bank of America"},
{"bankId":5,"bankName":"Royal Bank of Scotland"},
{"bankId":6,"bankName":"CitiBank"},
{"bankId":7,"bankName":"Barclays"},
{"bankId":8,"bankName":"DBS Bank"}];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h2>ng-repeat with $index, $even, ng-if</h2>
<table>
<tbody>
<tr>
<th></th>
<td>
$index
</td>
<td>
Bank Id
</td>
<td>
Bank Name
</td>
</tr>
<tr ng-repeat="bank in BankNames" ng-if="$even">
<td></td>
<td>
{{$index}}
</td>
<td ng-bind="bank.bankId">
</td>
<td>
{{bank.bankName}}
</td>
</tr>
</tbody>
</table>
<h2>ng-repeat with $index, $odd, ng-show</h2>
<table>
<tbody>
<tr>
<th></th>
<td>
$index
</td>
<td>
Bank Id
</td>
<td>
Bank Name
</td>
</tr>
<tr ng-repeat="bank in BankNames" ng-show="$odd">
<td></td>
<td>
{{$index}}
</td>
<td ng-bind="bank.bankId">
</td>
<td>
{{bank.bankName}}
</td>
</tr>
</tbody>
</table>
<h2>$first Example</h2>
<div ng-repeat="bank in BankNames" ng-if="$first">
Bank Id: {{bank.bankId}}
Bank Name: {{bank.bankName}}
</div>
<h2>$middle Example</h2>
<div ng-repeat="bank in BankNames" ng-if="$middle">
Bank Id: {{bank.bankId}}
Bank Name: {{bank.bankName}}
</div>
<h2>$last Example</h2>
<div ng-repeat="bank in BankNames" ng-if="$last">
Bank Id: {{bank.bankId}}
Bank Name: {{bank.bankName}}
</div>
<h2>$middle & ng-hide Example</h2>
<div ng-repeat="bank in BankNames" ng-hide="$middle">
Bank Id: {{bank.bankId}}
Bank Name: {{bank.bankName}}
</div>
<br/>
<br/>
<br/>
<table class="table table-bordered table-striped code-table">
<thead>
<tr>
<th>Variable</th>
<th>Type</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><span class="pln">$index</span></code></td>
<td><a href="" class="label type-hint type-hint-number">number</a></td>
<td>iterator offset of the repeated element (0..length-1)</td>
</tr>
<tr>
<td><code><span class="pln">$first</span></code></td>
<td><a href="" class="label type-hint type-hint-boolean">boolean</a></td>
<td>true if the repeated element is first in the iterator.</td>
</tr>
<tr>
<td><code><span class="pln">$middle</span></code></td>
<td><a href="" class="label type-hint type-hint-boolean">boolean</a></td>
<td>true if the repeated element is between the first and last in the iterator.</td>
</tr>
<tr>
<td><code><span class="pln">$last</span></code></td>
<td><a href="" class="label type-hint type-hint-boolean">boolean</a></td>
<td>true if the repeated element is last in the iterator.</td>
</tr>
<tr>
<td><code><span class="pln">$even</span></code></td>
<td><a href="" class="label type-hint type-hint-boolean">boolean</a></td>
<td>true if the iterator position <code><span class="pln">$index</span></code> is even (otherwise false).</td>
</tr>
<tr>
<td><code><span class="pln">$odd</span></code></td>
<td><a href="" class="label type-hint type-hint-boolean">boolean</a></td>
<td>true if the iterator position <code><span class="pln">$index</span></code> is odd (otherwise false).</td>
</tr>
</tbody>
</table>
</body>
</html>
/* Put your css in here */