Why nested ng-repeat is not working properly for h1 tag?

Question

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>

Try `{{ records2[$parent] }}`. I think there is a problem using arrays, because the keys are numbers, not the strings — Washington Guedes, Jun 28 '18 at 13:19
Related to your deleted question: https://regex101.com/r/UgmzNN/1 — Wiktor Stribiżew, Jul 16 '18 at 11:14
@WiktorStribiżew Brother thanks for you response but I have not achieved as per my goal. Could you please see my plunker. https://plnkr.co/edit/znNsVFqXME2CaEnxcBus?p=preview — Ankit Pandey, Jul 20 '18 at 14:24
You need [`.match(/.../g)`](https://plnkr.co/edit/ubCICfhpE7XAFNGB6n9L?p=preview) — Wiktor Stribiżew, Jul 20 '18 at 15:44
@WiktorStribiżew Thanks a lot. Brother You are Genius. Could you please let me know where to learn regex that build my concepts that can solve hardest regex problem. Please accept my linked-in request. — Ankit Pandey, Jul 21 '18 at 19:51
I do not know your level of regex knowledge :) so that I can only suggest doing all lessons at [regexone.com](http://regexone.com/), reading through [regular-expressions.info](http://www.regular-expressions.info), [regex SO tag description](http://stackoverflow.com/tags/regex/info) (with many other links to great online resources), and the community SO post called [What does the regex mean](http://stackoverflow.com/questions/22937618/reference-what-does-this-regex-mean). Also, [rexegg.com](http://rexegg.com) is worth having a look at. — Wiktor Stribiżew, Jul 21 '18 at 19:53

score 1 · Accepted Answer · edited Jun 28 '18 at 13:38

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

Ashish Mehta · Answer 2 · 2018-06-29T05:27:42.583

angular will render different ng-repeat on each H1 tag. so as per your data dom render like this

<h1 ng-repeat="x in records" class="ng-binding ng-scope"></h1>
<h1 ng-repeat="x in records" class="ng-binding ng-scope"></h1>
<h1 ng-repeat="y in records2" class="ng-scope"><span class="ng-binding"></span></h1>
<h1 ng-repeat="y in records2" class="ng-scope"><span class="ng-binding"></span></h1>
<h1 ng-repeat="z in records3" class="ng-scope"></h1>
<h1 ng-repeat="z in records3" class="ng-scope"></h1>

so we can not access siblings scope.

Why nested ng-repeat is not working properly for h1 tag?

2 Answers2