Finding index value using AngularJs

This blog is part of 1 Tute Sets.

AngularJs Tutorial

Tute set by shristi.shandilya

14 Blogs

prev 1 2 3 next

Finding index value using AngularJs
- 9/14
@shristi.shandilya

Follow Recommendations Offline Message

over 8 years ago
- 1
- 0
  Positive Vote
- 0
  Negative Vote
- 0
  Save Favourite
- 0
- 0
- 1
- 0
- 1.26k
Comment on it
Hii,

To learn how to find index value from a given list of array element or to find the index value of filtered data using AngularJs.
Go through examples given below.

Example 1:In this example index value of the day selected from the drop down list will be the output.

To find the index value of item selected from the dropdown an angularJs directive i.e ng-options is used inside which an array expression is defined.
Array expression defined within ng-option directive in the given example:

ng-options="days.indexOf(i) as i for i in days">
```
<body>
<div ng-app>
 <div ng-controller="MyController">
  <select ng-model="day"
      ng-options="days.indexOf(i) as i for i in days">
  </select>
  <p>Selected day : {{day}}</p>
 </div>
</div>
<script type="text/javascript">
 function MyController($scope) {
 $scope.days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
 $scope.day = 3;
}
</script>
</body>
```
Note: Must include this link

<script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>

Output:Screenshot attached below.

Example 2:In this example Output will be the index value of the filtered data we want.
```
<body>
<div ng-app="myModule">
 <div ng-controller = "myCntrl">
   <div ng-repeat="person in data | filter: {id:28}">
     In this example filtered data with id 28 is having index value 4 so the output will be {{data.indexOf(person)}}
   </div>  
 </div>
</div>
<script type="text/javascript">
 var appmodule = angular.module('myModule', []);

appmodule.controller('myCntrl', function ($scope) {
  $scope.data = [
  {
  "name": "Jainy",
  "id" : 25
  },
  {
  "name": "Jerry",
  "id": 27
  },
  {
  "name": "Ritu",
  "id": 20
  },
  {
  "name": "mihika",
  "id": 21
  },
  {
  "name": "tarun",
  "id": 28
  }
 
  ];
 
});
</script>
</body>
```
Note: Must include this link

<script src="http://code.angularjs.org/1.0.3/angular.min.js"></script>

Output: In this example filtered data with id 28 is having index value 4 so the output will be 4.
Tags
angularjs index value Blog HTML tags
- 9/14
Comment on it