Почему вложенный ng-repeat не работает должным образом для тега h1? - PullRequest
Новая
       9

Почему вложенный ng-repeat не работает должным образом для тега h1?

0 голосов
/ 28 июня 2018

Для вложенных тегов h1 ng-repeat не работает нормально.

Я знаю, что мы можем получить доступ к родительским данным во вложенном ng-repeat, используя $parent. Но это не работает для меня.

Если я заменим h1 на div, тогда это будет нормально. 

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>

Ответы [ 2 ]

0 голосов
/ 28 июня 2018

angular будет отображать различные ng-повторы для каждого тега H1. так согласно вашим данным dom рендерит вот так 

<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>

, поэтому мы не можем получить доступ к области братьев и сестер.

0 голосов
/ 28 июня 2018

H1 не может быть вложенным. Angular делает это правильно, но браузер закрывает теги слишком рано. Вот плункер без H1s и вложенный. 

<!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

...