如何使一个ng-repeat处理不同行中的不同列

时间:2017-09-24 11:00:33

标签: html angularjs pug

我正在尝试使用angular

显示这样的数据
"a":[{
    "name": "a's name"
    "b":[{
        "name":"b's name"
        "c":[{
            "name": "c's name"
            "d":[{
                "name":"d's name"
            }]
        }]
    }]
}]

我试过这个但是无法正常工作

tr
    td(ng-repeat="oneB in a.b")
    | {{oneB.name}}
tr
    td(ng-repeat="oneC in oneB.c")
    | {{oneC.name}}
tr
    td(ng-repeat="oneD in oneC.d")
    | {{oneD.name}}

还有这个

tr
    td(ng-repeat-start="oneB in a.b")
    | {{oneB.name}}
tr
    td(ng-repeat-end,ng-repeat-start="oneC in oneB.c")
    | {{oneC.name}}
tr
    td(ng-repeat-end,ng-repeat="oneD in oneC.d")
    | {{oneD.name}}

我真的需要帮助。

我目前正在开发 MEAN堆栈(Mongodb Express.js Angular.js和Node.js)以及 PUG

desired Image

JSON Image

1 个答案:

答案 0 :(得分:1)

希望这有帮助



var app = angular.module('App', []);

app.controller('Ctrl', function($scope) {

  $scope.data = [{
    "name": "a's name",
    "b":[{
        "name":"b's name",
        "c":[{
            "name": "c's name",
            "d":[{
                "name":"d's name"
            }]
        }]
    }]
}];
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="App">
  <div ng-controller="Ctrl">
  
  <pre>{{data | json}}</pre>
  
    <div ng-repeat="a in data"> 
      {{ a.name }}
      <div ng-repeat="b in a.b">
        {{ b.name }}
        <div ng-repeat="c in b.c">
          {{ c.name }}
          <div ng-repeat="d in c.d">
            {{ d.name }}
          </div> 
        </div> 
      </div>       
    </div>
    
    
  </div>
</div>
&#13;
&#13;
&#13;