How to use Custom Directive In Angular
In this approach, we have defined the custom directive “customCategory” which is used to pass and mainly manage the two $index values that are in the ng-repeat loops. This directive mainly encapsulates the overall structure and the functional behavior of displaying the nested elements. In this directive’s template, the $index of the current category and the course is displayed and made available for the “Show Indexes” button. This is been shown when the button is been clicked and the showIndexes function has been triggered in the controller, which passes the category and course indexes in as the arguments.
Example: Below is an example that demonstrates passing the 2 $index values within nested ng-repeat in AngularJS using a custom directive.
HTML
<!DOCTYPE html> < html ng-app = "myApp" > < head > < meta charset = "utf-8" > < title > AngularJS Nested ng-repeat Example </ title > < style > body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } .container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border-radius: 5px; } h1 { color: #4CAF50; } .category { margin: 10px 0; } .item { padding: 10px; background-color: #f9f9f9; border: 1px solid #ccc; border-radius: 5px; } .nested-item { padding: 10px; background-color: #fff; border: 1px solid #ddd; border-radius: 5px; margin: 5px 0; } button { background-color: #4CAF50; color: #fff; border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; } </ style > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js" > </ script > </ head > < body > < div ng-controller = "MainController" class = "container" > < h1 >w3wiki</ h1 > < h3 >Approach 2: Using Custom Directive</ h3 > < button ng-click = "addData()" >Add Data</ button > < custom-category ng-repeat = "data in dataList track by $index" data = "data" on-show-indexes = "showIndexes(categoryIndex, courseIndex)" > </ custom-category > </ div > < script > var app = angular.module('myApp', []); app.controller('MainController', function ($scope) { $scope.dataList = []; $scope.addData = function () { var nestedList = []; nestedList.push({ courseTitle: "AngularJS for Beginners", author: "GFGUser1" }); nestedList.push({ courseTitle: "Advanced Web Development", author: "GFGUser2" }); nestedList.push({ courseTitle: "JavaScript Fundamentals", author: "GFGUser3" }); nestedList.push({ courseTitle: "Web Design Principles", author: "GFGUser4" }); $scope.dataList.push({ nestedList: nestedList }); }; $scope.showIndexes = function (categoryIndex, courseIndex) { alert(`Category: ${categoryIndex}, Course: ${courseIndex}`); console.log(`Category: ${categoryIndex}, Course: ${courseIndex}`); }; }); app.directive('customCategory', function () { return { restrict: 'E', scope: { data: '=', onShowIndexes: '&' }, template: ` < div class = "category" > < div class = "item" ng-repeat= "nestedData in data.nestedList track by ($index + '-' + $parent.$index + '-' + $id)"> < p > < strong > Category: {{ $index + 1 }} </ strong >< br > < strong > Course Title: </ strong >{{ nestedData.courseTitle }}< br > < strong > Author: </ strong > {{ nestedData.author }} < button ng-click= "onShowIndexes({categoryIndex: $index + 1, courseIndex: $parent.$index + 1})"> Show Indexes </ button > </ p > </ div > </ div > `, link: function (scope, element, attrs) { scope.categoryIndex = scope.$parent.$index + 1; } }; }); </ 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.