Question

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

Answer 1

H1不能嵌套。 Angular生产的是正确的，但浏览器过早关闭标签。这是没有H1且嵌套的矮子。

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

Answer 2

angular将在每个H1标签上呈现不同的ng-repeat。因此，按照您的数据dom渲染方式

Exclude

所以我们不能访问兄弟姐妹范围。

为什么嵌套ng-repeat对于h1标签不能正常工作？

2 个答案: