AngularJS嵌套ng-repeat

Question

我有一個像這樣的HTML：

 <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重復的輸出？

Answer 1

你的第二個ng-repeat需要取第一個ng-repeat值而不是直接取房間名，所以你的第二個ng-repeat應該是這樣的：

碼：

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

Answer 2

您可以通過稍微重新格式化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/

Answer 3

這是你想要的嗎？

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>