How to use ng-init and $parent.$index In Angular

Q: How to use ng-init and $parent.$index In Angular

In this approach, we have defined the two $index values within the nested ng-repeat and passed those values using the ng-init directive to create the custom variable named “categoryIndex” and the “productIndex“. These variables mainly are used to receive the indices of the category and product with the iterations. Here, the $parent.$index is used to mainly access the index which is in the outer ‘ng-repeat‘ directive and $parent refers to the parent scope in AngularJS. Using this approach, we can easily access more than 1 index in the application.

Steps for Configuring AngularJS Application

Using Custom Directive

In this approach, we have defined the two $index values within the nested ng-repeat and passed those values using the ng-init directive to create the custom variable named “categoryIndex” and the “productIndex“. These variables mainly are used to receive the indices of the category and product with the iterations. Here, the $parent.$index is used to mainly access the index which is in the outer ‘ng-repeat‘ directive and $parent refers to the parent scope in AngularJS. Using this approach, we can easily access more than 1 index in the application.

Example: Below is an example that demonstrates passing the 2 $index values within nested ng-repeat in AngularJS using ng-init and $parent.$index.

HTML

<!DOCTYPE html> 
<html ng-app="myApp"> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> 
    </script> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            background-color: #f7f7f7; 
        } 
  
        .product { 
            width: 200px; 
            background-color: #fff; 
            border: 1px solid #ccc; 
            padding: 10px; 
            margin: 10px; 
            float: left; 
            border-radius: 5px; 
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
            transition: background-color 0.3s; 
        } 
  
        .product:hover { 
            background-color: #e0e0e0; 
        } 
  
        h1 { 
            color: #00a100; 
        } 
  
        h3 { 
            font-weight: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <div ng-controller="myController"> 
        <h1>w3wiki</h1> 
        <h3> 
              Approach 1: Using ng-init and $parent.$index 
          </h3> 
  
        <div ng-repeat="category in productCategories"> 
            <div class="product" 
                 ng-repeat="product in category.products" 
                 ng-init="categoryIndex = $parent.$index;  
                      productIndex = $index"> 
                <h3>Category Index: {{ categoryIndex }}, 
                    Product Index: {{ productIndex }}</h3> 
                <p> 
                      Category {{ categoryIndex }} - {{ category.name }} 
                  </p> 
                <p>Product: {{ product.name }}</p> 
                <button ng-click= 
                        "showProductDetails(categoryIndex, productIndex)"> 
                    View Details 
                  </button> 
            </div> 
        </div> 
    </div> 
  
    <script> 
        var app = angular.module('myApp', []); 
        app.controller('myController', function ($scope) { 
            $scope.productCategories = [ 
                { 
                    name: 'Electronics', 
                    products: [ 
                        { name: 'Smartphone' }, 
                        { name: 'Laptop' }, 
                        { name: 'Tablet' } 
                    ] 
                }, 
                { 
                    name: 'Clothing', 
                    products: [ 
                        { name: 'T-shirt' }, 
                        { name: 'Jeans' } 
                    ] 
                } 
            ]; 
            $scope.showProductDetails = 
                  function (categoryIndex, productIndex) { 
                if ($scope.productCategories[categoryIndex] && 
                    $scope.productCategories[categoryIndex] 
                          .products[productIndex]) { 
                    alert("Clicked on Category " + 
                        $scope.productCategories[categoryIndex].name + 
                        " and Product "  
                          + $scope.productCategories[categoryIndex]. 
                            products[productIndex].name); 
                } else { 
                    console.error("Invalid indices or data not found."); 
                } 
            }; 
        }); 
    </script> 
</body> 
  
</html>

Output:

How to pass the 2 $index values within nested ng-repeat in AngularJS ?

In AngularJS applications, we can create dynamic behavior by passing the $index values within the nested ng-repeat directives. In the application, the $index variable or value is nothing but the index of the current item or the product that is in the ng-repeat loop. We can pass these values using 2 different methods. So in this article, we will see the different approaches to pass the 2 $index values within nested ng-repeat in AngularJS.