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

时间:2015-10-28 11:46:20

标签: angularjs ng-repeat angularjs-ng-include

编辑:以下是此主题的摘要:(http://plnkr.co/edit/yDPEBPgvBCEKXQiwEjoh?p=preview

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

A
 a
     1
     2
 b
     1

通过ng-repeat我得到a和b(我只需要他们的长度)。

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

这个部分文件应该得到结构中的下一个节点(例如1& 2)。

如何将所需模型的部分传递给我的部分文件?

以下是此主题的摘要:(http://plnkr.co/edit/yDPEBPgvBCEKXQiwEjoh?p=preview

2 个答案:

答案 0 :(得分:0)

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

subscribeOn

答案 1 :(得分:0)

看看这个:

你忘了单引号:

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

&#13;
&#13;
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
        }
    ];
    
    
}]);
&#13;
<!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>
&#13;
&#13;
&#13;