在 Angular (ng-repeat/ng-include) 中的视图之间传递模型部件

Question

编辑：这是这个主题的 plunker：(http://plnkr.co/edit/yDPEBPgvBCEKXQiwEjoh?p=preview)

我的控制器中有一些嵌套数据结构。

通过 ng-repeat 我得到 a 和 b（我只需要它们的长度）。

通过 ng-includ，我在部分文件中包含了第二个 ng-repeat。

此部分文件应获取结构中的下一个节点（例如 1 和 2）。

如何将所需模型的一部分传递到我的部分文件？

这是这个话题的傻瓜：(http://plnkr.co/edit/yDPEBPgvBCEKXQiwEjoh?p=preview)

Answer 1

您在包含模板部分时缺少单引号，因此您的模板未呈现。

<div ng-include="'_roles.html'"></div>

Answer 2

看这个：

你忘了加单引号:

<div ng-include="'_roles.html'"></div>

angular.module('myApp',[]).controller('MyController', ['$scope', function ($scope) {

    $scope.data = [
        {
            "id": 10,
            "name": "Platform A",
            "roles": [
                {
                    "id": 1,
                    "name": "Project Manager"
                },
                {
                    "id": 2,
                    "name": "Administrator"
                }
            ],
            "del": true
        },
        {
            "id": 12,
            "name": "Platform B",
            "roles": [
                {
                    "id": 2,
                    "name": "Administrator"
                }
            ],
            "del": true
        }
    ];
    
    
}]);

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css" />
  <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" data-semver="3.1.1" data-require="bootstrap-css@3.1.1" />
  <script src="http://code.jquery.com/jquery-2.1.4.min.js" data-semver="2.1.4" data-require="jquery@*"></script>
  <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
 

  <script src="script.js"></script>
</head>

<body ng-controller="MyController">

  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>
          <!-- COLLAPSE  -->
        </th>
        <th>ID</th>
        <th>Name</th>
        <th>Roles</th>
        <th>Deletion</th>
      </tr>
    </thead>
     <tbody>
      <tr ng-repeat="model in data">
        <td>
          <!-- COLLAPSE -->
        </td>
        <td>{{model.id}}</td>
        <td>{{model.name}}</td>
        <td>
          {{model.roles.length}}
          <div ng-include="'_roles.html'"></div>
        </td>
        <td>{{model.del}}</td>
      </tr>
    </tbody>
    
  </table>
</body>
<script type="text/ng-template" id="_roles.html">
<table class="table table-striped table-bordered table-hover">
  <tbody>
    <tr ng-repeat="roles in model.roles">
      <td>
        <!-- COLLAPSE -->
      </td>
      <td>{{roles.id}}</td>
      <td>{{roles.name}}</td>
    </tr>
  </tbody>
</table>
</script>
</html>

在 Angular (ng-repeat/ng-include) 中的视图之间传递模型部件

Passing model parts between views in Angular (ng-repeat/ng-include)

angularjs

ng-repeat

angularjs-ng-include