Verschachtelte ng-Wiederholung

70

Ich habe eine Dummy-XML-Datei:

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

Mit dieser Bibliothek http://code.google.com/p/x2js/ konvertiere ich sie in json in eine VariablemyData

 {
    "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"
    }
}

Der Tag kann eine beliebige Anzahl von Jobs haben, Jobs können verschachtelt sein und eine beliebige Anzahl anderer Jobs enthalten.

Verwenden Sie jetzt diesen Code

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

Ich kann die Tage auflisten, die funktionieren. Ich würde das mit folgendem Code erwarten

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

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

Ich kann Tage und Jobs der obersten Ebene für diesen Tag auflisten, aber es funktioniert nicht. (Das Auflisten der verschachtelten Jobs wäre die nächste Aufgabe, ohne jetzt danach zu fragen.)

Wie liste ich mindestens die Top-Level-Jobs auf? Auch im JSON-Format sehe ich einige Jobs Objectsund einige sind Arrays. Wie gehe ich mit beiden Situationen um?

PS.: Unter Verwendung von Winkel 1.2.0-rc.3

json angularjs przno
quelle
Siehe ausführlichen Artikel codepedia.info/angularjs-nested-json-nested-ng-repeat
Satinder singh

Antworten:

104

Es ist besser, ein korrektes JSON-Format zu haben, als das aus XML konvertierte direkt zu verwenden. 

[
  {
    "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",

              }
            ]
          }
        ]
      }
    ]
  }
]

Dies macht die Dinge viel einfacher und einfacher zu durchlaufen.

Jetzt können Sie die Schleife schreiben als - 

<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>
Prasad
quelle
1
ok, nehmen wir an, ich kann zu json konvertieren, den Sie gepostet haben. Wie würde ich jetzt die Tage und ihre (Top-Level-) Jobs durchlaufen?
Przno
Entschuldigung, aber ich kann immer noch nichts von dem verschachtelten ausgeben ng-repeat. Beispiel: jsfiddle.net/83XFS
przno
11
Das Ersetzen von p-Tags durch div-Tags hat funktioniert. <p> -Tags können anscheinend keine Blockelemente enthalten. Aktualisierte Geige unter: jsfiddle.net/83XFS/2
Prasad
Unglaublich, ich habe nach Fehlern in meinem Angular / JS-Code gesucht und nicht an solche dummen Fehler gedacht. Vielen Dank!
Przno
@Prasad Ich sehe Ihre Antwort Ich habe fast die gleiche Art von Problem Bitte helfen Sie. Link
Neotrixs
7

Wenn Sie ein großes verschachteltes JSON-Objekt haben und es auf mehreren Bildschirmen verwenden, können beim Laden von Seiten Leistungsprobleme auftreten. Ich greife immer zu kleinen einzelnen JSON-Objekten und frage die zugehörigen Objekte als verzögertes Laden nur dort ab, wo sie benötigt werden.

Sie können es mit ng-init erreichen

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

Der Code auf der Controllerseite sollte wie folgt aussehen

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

Während die API-Factory wie folgt ist:

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' }
        });
    });
Sacky San
quelle
0

Erstellen Sie ein Dummy-Tag, das nicht auf der Seite gerendert wird, aber als Halter für ng-repeat fungiert:

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