Display number using ng-reapeat in Angular Js
For this kind process you can use {{$index}} to print index position for Auto Numbering inside ng-repeat.
<html>
<head>
<script src="Scripts/angular.min.js"></script>
<title></title>
<script>
var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
$scope.friends = [{ name: 'Nasrullah', gender: 'Male' },
{ name: 'Fathima', gender: 'female' },
{ name: 'Ishaq', gender: 'male' },
{ name: 'Rasik', gender: 'male' }];
});
</script>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
<ul class="example-animate-container">
<li ng-repeat="friend in friends">
<div>
{{$index +1}}
{{friend.name}} is a {{friend.gender}}.
</div>
</li>
</ul>
</div>
</body>
</html>
Description:
In this above program Now I am going to display list of names using the variable {{$index +1}}
In this variable is used to Auto numbering of Angularjs ng-repeat.
In this same manner we can use below variables to make your project legible.
· $index
· $first
· $middle.
· $last
· $even
· $odd
Post your comments / questions
Recent Article
- Your system's memory configuration has changed since it entered hibernation.
- Save image to client browser using jQuery?
- Get filename of image jQuery?
- How to get the image src using JavaScript?
- System.Net.Http.Formatting, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' which has a higher version than referenced assembly 'System.Net.Http.Formatting' with identity 'System.Net.Http.Formatting, Version=4.0.0.0
- Cordova Android build error "Cannot read property 'length' of undefined". An error occurred while running subprocess cordova.
- ERROR in The Angular Compiler requires TypeScript >=3.9.2 and <4.0.0 but 3.8.3 was found instead
- Code ENOLOCAL Could not install from "android" as it does not contain a package.json file.
Related Article