AngularJS嵌套NG重复

问题描述：

<div class="fields-plan"data-ng-repeat="roomname in assign.roomname"> 
     <section> 
     <span>Room: {{roomname}}</span>   
     </section> 
    <ul data-ng-repeat="room in assign.rooms.roomname"> 
     <li> 
     {{room.room}} 
     </li> 
    <ul> 
</div>

和我的角度控制这个样子的：

var room = {"1.2": 
       [ 
        {room: "1.2.1"}, 
        {room: "1.2.2"}, 
        {room: "1.2.3"} 
       ], 
     "1.3": [ 
      {room: "1.3.1"}, 
      {room: "1.3.2"}, 
      {room: "1.3.3"} 
     ]}; 


    var keys = Object.keys(room); 

    this.roomname = keys; 
    this.rooms = room;

在我第二次NG重复，它不工作，以及如何我可以根据房间名称循环，从第一个ng的输出重复？

答

你的第二个NG-重复需要采取的第一个NG-重复值，而不是直接以房间名，所以你的第二个NG重复应该是这样的：

代码：

<div class="fields-plan"data-ng-repeat="(key, value) in assign.rooms"> 
     <section> 
     <span>Room: {{key}}</span>   
     </section> 
    <ul data-ng-repeat="room in value"> 
     <li> 
     {{room.room}} 
     </li> 
    <ul> 
</div>

我刚要回答这个问题，但他的JSON是不是右formatm他 – 2015-02-12 06:31:08

@ bto.rdz这不会工作：是啊JSON是关键，价值形式，以便更新代码在答案 – V31 2015-02-12 06:36:31

谢谢。有用！ – max 2015-02-12 06:40:03

答

您可以通过稍微重新格式化Json然后使用以下代码来实现此目的：

关键是使用第二个ng-repeat中第一个ng-repeat的值，而不是尝试引用第一个集合。

HTML：

<div ng-controller="MyCtrl"> 

    <div class="fields-plan" ng-repeat="room in rooms"> 
      <section> 
      <span>Room: {{room.name}}</span>   
      </section> 
     <ul ng-repeat="subroom in room"> 
      <li> 
      {{room.subRoom}} 
      </li> 
     <ul> 
    </div> 
</div>

的javascript：

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

//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

function MyCtrl($scope) { 
    $scope.rooms = [ { name : "1.2", 
         subRoom: [ 
        "1.2.1","1.2.2","1.2.3"], 
        }, { name: "1.3", 
     subRoom: [ 
      "1.3.1","1.3.2","1.3.3"]}]; 
}

小提琴演示：http://jsfiddle.net/0pnam0wj/

答

这是你想要的？

plnkr

<div data-ng-repeat="(roomnamePrefix, roomname) in rooms"> 
     <section> 
     <span>Room: {{roomnamePrefix}}</span>   
     </section> 
    <ul data-ng-repeat="room in roomname"> 
     <li> 
     {{room.room}} 
     </li> 
    <ul> 
</div>

AngularJS嵌套NG重复

相关推荐