JSFiddle - React, Tailwind, and code Playground

Demonstrate issue - Steve improvement

by Steve Ayers

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<div ng-app="test">
   
    <div ng-view ng-controller="MyController">
        
        <div ng-repeat="row in rows">
            
        <div ng-repeat="col in row">
            {{col}}
            <to-dos class="box" parent-index="{{$parent.$index}}" child-index="{{$index}}"></to-dos>
            </div>
        </div>
        
    </div>

    
</div>

CSS

.box {
    border:1px solid black;
}

JavaScript

var app=angular.module("test", []);

app.directive('toDos', function () {
  return {
		restrict: 'E',
      template: '<div>Parent Index is: {{parentIndex}}</div><div>Child Index is: {{childIndex}}</div>',
		scope: {
        	parentIndex: '@',
            childIndex : '@'
      	}
	};
});

app.controller('MyController', function($scope) {
    
    
    $scope.rows = [
        [
            {
                "test" : "one"
            },
            {
                "test" : "two"
            }
        ],
        [
            {
                "test" : "three"
            }
        ]
    ];
    
});