[英]How do i make a nested array in angular
遵循docs.angularjs.org上的教程,第2步 。 如何將此數組更新為嵌套數組?
這是基本數組:
'use strict';
/* Controllers */
function PhoneListCtrl($scope){
$scope.phones = [
{"name" : "Samsung Galaxy S4",
"snippet" : "Operativsystem : Android 4.2.2"
}
]
}
這說明了我想做什么:
'use strict';
/* Controllers */
function PhoneListCtrl($scope){
$scope.phones = [
{"name" : "Samsung Galaxy S4",
"snippet" : {"Operativsystem" : "Android 4.2.2",
"Skärm" : "4,99 tum",
"CPU" : "Quad-core",
"Kamera, bak" : "13 MP",
"Kamera, fram" : "1,9 MP",
"Övrigt" : "Närfältskommunikation (Eng. near field communication, NFC)"
}
}
]
}
我當前的HTML模板:
<body ng-controller ="PhoneListCtrl">
<h1>The future of mobile devices</h1>
<ul>
<li ng-repeat="phone in phones">
<h3>{{phone.name}}</h3>
<p>{{phone.snippet}}</p>
</li>
</ul>
<p>Total number of phones: 2</p>
</body>
我看到我可以使用{{phone.snippet.Operativsystem}}
來獲取第一個元素。 但我也希望將標簽Operativsystem印在HTML中,如下所示:
我意識到我可以像下面那樣做,但是那仍然不會只在HTML中打印“屬性名稱/鍵”值
<ul>
<li ng-repeat="phone in phones">
<h3>{{phone.name}}</h3>
<ul>
<li ng-repeat="key in phone.snippet">
{{key}}
</li>
</ul>
<p>{{phone.snippet}}</p>
</li>
</ul>
您可以嵌套ng-repeat
<ul>
<li ng-repeat="phone in phones">
<h3>{{phone.name}}</h3>
<p ng-repeat="(key, value) in phone.snippet">{{key}}:{{value}}</p>
</li>
</ul>
HTML: -
<body ng-app ng-controller="PhoneListCtrl">
<h1>The future of mobile devices</h1>
<ul>
<li ng-repeat="phone in phones">
<h3>{{phone.name}}</h3>
<ul>
<li>{{phone.snippet.Operativsystem}}</li>
<li>{{phone.snippet.Skarm}}</li>
<li>{{phone.snippet.CPU}}</li>
<li>{{phone.snippet.Kamerabak}}</li>
<li>{{phone.snippet.Kamerafram}}</li>
<li>{{phone.snippet.Ovrigt}}</li>
</ul>
</li>
</ul>
<p>Total number of phones: 2</p>
</body>
JS: -
'use strict';
/* Controllers */
function PhoneListCtrl($scope) {
$scope.phones = [
{
"name": "Samsung Galaxy S4",
"snippet": {
"Operativsystem": "Android 4.2.2",
"Skarm": "4,99 tum",
"CPU": "Quad-core",
"Kamerabak": "13 MP",
"Kamerafram": "1,9 MP",
"Ovrigt": "Närfältskommunikation (Eng. near field communication, NFC)"
}
}]
}
請嘗試這樣做
在HTML
<body ng-app ng-controller="PhoneListCtrl">
<h1>The future of mobile devices</h1>
<ul>
<li ng-repeat="phone in phones">
<h3>{{phone.name}}</h3>
<ul>
<li ng-repeat="sn in phone.snippet">
{{sn.name}} : {{sn.value}}
</li>
</ul>
</li>
</ul>
<p>Total number of phones: 2</p>
</body>
JS
'use strict';
/* Controllers */
function PhoneListCtrl($scope) {
$scope.phones = [
{
"name": "Samsung Galaxy S4",
"snippet": [{"name":"Operativsystem","value":"Android 4.2.2"},
{"name":"Skarm","value":"4,99 tum"},
{"name":"CPU","value":"Quad-core"},
{"name":"Kamerabak","value":"13 MP"},
{"name":"Kamerafram","value":"1,9 MP"},
{"name":"Ovrigt","value":"Närfältskommunikation (Eng. near field communication, NFC)"}]
}
]
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.