Menu
For h1 tag nested ng-repeat is not working fine.
I know that we can access the parent data in nested ng-repeat using $parent. But this is not working for me.
If I replace h1 with div then this is working fine.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Ernst Handel",
]
$scope.records2 = [
"Alfreds Futterkiste2",
"Ernst Handel2",
]
$scope.records3 = [
"Alfreds Futterkiste3",
"Ernst Handel3",
]
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">
<h1 ng-repeat="y in records2">
<span>{{$parent.x}}</span>
<h1 ng-repeat="z in records3"></h1>
</h1>
</h1>
<div>
816
asked Jan 21 '26 23:01
H1's cannot be nested. Angular is producing it right, but browser is closing tags too soon. Here is plunker without H1s and nested.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
var vm = this;
vm.records = [
"Alfreds Futterkiste",
"Ernst Handel",
]
vm.records2 = [
"Alfreds Futterkiste2",
"Ernst Handel2",
]
vm.records3 = [
"Alfreds Futterkiste3",
"Ernst Handel3",
]
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<div ng-repeat="x in vm.records">
- <span>{{x}}</span>
<div ng-repeat="y in vm.records2">
--<span>{{y}}</span>
<div ng-repeat="z in vm.records3">
--- <span>{{z}}</span>
</div>
</div>
</div>
</div>
</body>
</html>https://plnkr.co/edit/4f4Ef0V2YGCkZkv49bHl?p=info
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
