[解決済み] ネストしたng-repeat
2022-02-08 07:51:43
質問
ダミーの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"
}
}
1日にいくつでもジョブを持つことができ、ジョブはネストされ、いくつでも他のジョブを含むことができます。
次にこのコードを使用します。
<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フォーマットで見ると、いくつかのジョブが
Objects
で、いくつかは
Arrays
. 両方の状況をどのように処理すればよいのでしょうか?
追記:angular 1.2.0-rc.3を使用しています。
解決方法は?
XMLから変換したものをそのまま使うのではなく、きちんとした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>
関連
-
[解決済み] 型 '{}' は型 'IntrinsicAttributes & IntrinsicClassAttributes' に代入できません。
-
[解決済み] Unreadable Notebook NotJSONError('Notebook does not appear to be JSON: u'{'cells": [\'{'cell_type": "...],)
-
[解決済み] JSON Schemaにおける "required "と "optional "の違いについて
-
[解決済み] kubectl get pods の json フォーマットの出力を jsonpath でパースする方法
-
[解決済み] JSON標準 - 浮動小数点数
-
[解決済み] Notepad++でJSONを再フォーマットする方法は?
-
[解決済み] どのようにjqを使用して2つのファイルから2つのJSONオブジェクトをマージするには?
-
[解決済み] http.GetからJSONレスポンスを取得する方法
-
[解決済み] JSONの容量に限界はありますか?
-
[解決済み] Scalaの標準クラスを使ってScalaでJSONをパースするには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] コマンドラインを使用してJSONオブジェクトの項目をカウントする方法は?
-
[解決済み] Postgresで、レコードにjsonや文字列が混在している場合に、'invalid input syntax for type json'を防ぐにはどうしたらよいでしょうか。
-
[解決済み] JSONのXSLT対応
-
[解決済み] JSONオブジェクトに末尾のカンマを使用することは可能ですか?
-
Gulpがデモ用ライティングウィジェットを作成
-
[解決済み] どのようにjqを使用して2つのファイルから2つのJSONオブジェクトをマージするには?
-
[解決済み] JSON、REST、SOAP、WSDL、そしてSOA。これらはどのように結びついているのか
-
[解決済み] jsonパラメータを含むCurl GETリクエスト
-
[解決済み] CSV/XLSをJSONに変換する?[クローズド]
-
[解決済み] ASP.NETでWebAPIやMVCを使ってJSONを返す。