Imbriquée
J'ai un fichier XML factice:
<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>
Utilisation de cette bibliothèque http://code.google.com/p/x2js/ Je le convertis en json en variable 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"
}
}
Jour peut avoir n'importe quel nombre de travaux, les travaux peuvent être imbriqués et contenir un nombre quelconque d'autres travaux.
Maintenant, en utilisant ce code
<p ng-repeat="day in myData.Week.Day">
{{day._dow}} - {{day._templateDay}}
</p>
Je peux lister les jours, ça marche. Je m'attendrais à ce qu'avec le code suivant
<p ng-repeat="day in myData.Week.Day">
{{day._dow}} - {{day._templateDay}}
<span ng-repeat="job in day.Job">
{{job._name}}
<span/>
</p>
Je peux énumérer des jours et des emplois de premier niveau pour cette journée, mais cela ne fonctionne pas. (Pour lister les Jobs imbriqués serait la tâche suivante, sans poser de question à ce sujet maintenant).
Alors, comment lister au moins les emplois de premier niveau? Également au format JSON, je vois que certains Jobs sont Objects et d’autres Arrays. Comment gérer les deux situations?
PS .: en utilisant angular 1.2.0-rc.3
Il est préférable d’avoir un format JSON approprié au lieu d’utiliser directement celui converti à partir de XML.
[
{
"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",
}
]
}
]
}
]
}
]
Cela rendra les choses beaucoup plus faciles et faciles à parcourir.
Maintenant, vous pouvez écrire la boucle en tant que -
<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>
Si vous avez un objet JSON imbriqué volumineux et que vous l'utilisez sur plusieurs écrans, vous risquez de rencontrer des problèmes de performances lors du chargement de page. J'utilise toujours des objets JSON individuels de petite taille et interroge les objets associés en tant que chargement différé uniquement là où ils sont requis.
vous pouvez y arriver en utilisant 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>
Le code du côté du contrôleur devrait ressembler à celui ci-dessous
$scope.getPresenters = function(id) {
return SessionPresenters.get({id: id});
};
Alors que la fabrique d’API se présente comme suit:
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' }
});
});
Créez une balise factice qui ne sera pas rendue sur la page, mais fonctionnera en tant que titulaire pour ng-repeat:
<dummyTag ng-repeat="featureItem in item.features">{{featureItem.feature}}</br> </dummyTag>