네스트된 ng-repeat

네스트된 ng-repeat

몇 가지 더미 XML 파일이 있습니다.

<Week number="2013-W45">
    <Day dow="1" templateDay="Monday">
        <Job name="wake up" >
            <Job name="get dressed" >
                <Job name="prepare breakfast" >
                    <Job name="eat breakfast" > </Job>
                </Job>
            </Job>
        </Job>
        <Job name="work 9-5" >
        </Job>
    </Day>
    <Day dow="2" templateDay="Tuesday"   >
        <Job name="wake up" >
            <Job name="get dressed" >
                <Job name="prepare breakfast" >
                    <Job name="eat breakfast" > </Job>
                </Job>
            </Job>
        </Job>
        <Job name="work 9-5" >
        </Job>
        <Job name="football" >
        </Job>
    </Day>
    <Day dow="3"   templateDay="Wednesday" >
        <Job name="wake up" >
            <Job name="get dressed" >
                <Job name="prepare breakfast" >
                    <Job name="eat breakfast" > </Job>
                </Job>
            </Job>
        </Job>
        <Job name="work 9-5" >
        </Job>
    </Day>
    <Day dow="4"  templateDay="Thursday"  >
        <Job name="wake up" >
            <Job name="get dressed" >
                <Job name="prepare breakfast" >
                    <Job name="eat breakfast" > </Job>
                </Job>
            </Job>
        </Job>
        <Job name="work 9-5" >
        </Job>
        <Job name="football" >
        </Job>
    </Day>
    <Day dow="5" templateDay="Friday" >
        <Job name="go to pub" >
        </Job>
    </Day>
    <Day dow="6" templateDay="Saturday"  >
        <Job name="work 9-5" >
        </Job>
    </Day>
    <Day dow="7" templateDay="Sunday" >
        <!-- nothing to do on sunday -->
    </Day>
</Week>

이 라이브러리 http://code.google.com/p/x2js/를 사용하여 json으로 변환하고 변수를 변환합니다.myData

 {
    "Week" : {
        "Day" : [{
                "Job" : [{
                        "Job" : {
                            "Job" : {
                                "Job" : {
                                    "_name" : "eat breakfast"
                                },
                                "_name" : "prepare breakfast"
                            },
                            "_name" : "get dressed"
                        },
                        "_name" : "wake up"
                    }, {
                        "_name" : "work 9-5"
                    }
                ],
                "_dow" : "1",
                "_templateDay" : "Monday"
            }, {
                "Job" : [{
                        "Job" : {
                            "Job" : {
                                "Job" : {
                                    "_name" : "eat breakfast"
                                },
                                "_name" : "prepare breakfast"
                            },
                            "_name" : "get dressed"
                        },
                        "_name" : "wake up"
                    }, {
                        "_name" : "work 9-5"
                    }, {
                        "_name" : "football"
                    }
                ],
                "_dow" : "2",
                "_templateDay" : "Tuesday"
            }, {
                "Job" : [{
                        "Job" : {
                            "Job" : {
                                "Job" : {
                                    "_name" : "eat breakfast"
                                },
                                "_name" : "prepare breakfast"
                            },
                            "_name" : "get dressed"
                        },
                        "_name" : "wake up"
                    }, {
                        "_name" : "work 9-5"
                    }
                ],
                "_dow" : "3",
                "_templateDay" : "Wednesday"
            }, {
                "Job" : [{
                        "Job" : {
                            "Job" : {
                                "Job" : {
                                    "_name" : "eat breakfast"
                                },
                                "_name" : "prepare breakfast"
                            },
                            "_name" : "get dressed"
                        },
                        "_name" : "wake up"
                    }, {
                        "_name" : "work 9-5"
                    }, {
                        "_name" : "football"
                    }
                ],
                "_dow" : "4",
                "_templateDay" : "Thursday"
            }, {
                "Job" : {
                    "_name" : "go to pub"
                },
                "_dow" : "5",
                "_templateDay" : "Friday"
            }, {
                "Job" : {
                    "_name" : "work 9-5"
                },
                "_dow" : "6",
                "_templateDay" : "Saturday"
            }, {
                "_dow" : "7",
                "_templateDay" : "Sunday"
            }
        ],
        "_number" : "2013-W45"
    }
}

Day에는 임의의 수의 Jobs가 포함될 수 있으며, Jobs는 네스트될 수 있으며 다른 Jobs를 포함할 수 있습니다.

이 코드를 사용하고 있습니다.

<p ng-repeat="day in myData.Week.Day">
   {{day._dow}} - {{day._templateDay}}
</p>

날짜를 나열할 수 있어요, 그게 효과가 있어요.나는 다음과 같은 코드로 그것을 예상한다.

<p ng-repeat="day in myData.Week.Day">
    {{day._dow}} - {{day._templateDay}}

    <span ng-repeat="job in day.Job">
        {{job._name}}
    <span/>
</p>

해당 날짜의 일별 작업 및 최상위 수준 작업을 나열할 수 있지만 작동하지 않습니다(내스트된 작업을 나열하는 것이 다음 작업일 뿐, 지금 묻지 않음).

그럼, 적어도 어떻게 하면 최고 수준의 잡스를 나열할 수 있을까요?또한 json 형식에서는 Jobs가Objects그리고 어떤 것은Arrays두 가지 상황을 어떻게 처리할 것인가?

추신: 각도 1.2.0-rc.3 사용

XML에서 변환된 JSON 형식을 직접 사용하는 대신 올바른 JSON 형식을 사용하는 것이 좋습니다.

[
  {
    "number": "2013-W45",
    "days": [
      {
        "dow": "1",
        "templateDay": "Monday",
        "jobs": [
          {
            "name": "Wakeup",
            "jobs": [
              {
                "name": "prepare breakfast",

              }
            ]
          },
          {
            "name": "work 9-5",

          }
        ]
      },
      {
        "dow": "2",
        "templateDay": "Tuesday",
        "jobs": [
          {
            "name": "Wakeup",
            "jobs": [
              {
                "name": "prepare breakfast",

              }
            ]
          }
        ]
      }
    ]
  }
]

이렇게 하면 훨씬 쉽고 쉽게 통과할 수 있습니다.

이제 루프를 다음과 같이 쓸 수 있습니다.

<div ng-repeat="week in myData">
   <div ng-repeat="day in week.days">
      {{day.dow}} - {{day.templateDay}}
      <b>Jobs:</b><br/> 
       <ul>
         <li ng-repeat="job in day.jobs"> 
           {{job.name}} 
         </li>
       </ul>
   </div>
</div>

중첩된 큰 JSON 개체를 여러 화면에서 사용하는 경우 페이지 로드 시 성능 문제가 발생할 수 있습니다.저는 항상 작은 개별 JSON 개체를 찾고 필요한 부분에만 느린 부하로 관련 개체를 쿼리합니다.

ng-init을 사용하여 달성할 수 있습니다.

<td class="lectureClass" ng-repeat="s in sessions" ng-init='presenters=getPresenters(s.id)'>
      {{s.name}}
      <div class="presenterClass" ng-repeat="p in presenters">
          {{p.name}}
      </div>
</td> 

컨트롤러 측의 코드는 다음과 같습니다.

$scope.getPresenters = function(id) {
    return SessionPresenters.get({id: id});
};

API 팩토리는 다음과 같습니다.

angular.module('tryme3App').factory('SessionPresenters', function ($resource, DateUtils) {

        return $resource('api/session.Presenters/:id', {}, {
            'query': { method: 'GET', isArray: true},
            'get': {
                method: 'GET', isArray: true
            },
            'update': { method:'PUT' }
        });
    });

페이지에 렌더링되지 않지만 ng-repeat의 홀더로 기능하는 더미 태그를 만듭니다.

<dummyTag ng-repeat="featureItem in item.features">{{featureItem.feature}}</br> </dummyTag>

언급URL : https://stackoverflow.com/questions/19839743/nested-ng-repeat