angularjs - ng-repeat：从 JSON 数组对象访问键和值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21697695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angularjs - ng-repeat: access key and value from JSON array object
提问by Ajith
I have JSON Array object as shown below.
我有如下所示的 JSON 数组对象。
$scope.items =
[
{Name: "Soap", Price: "25", Quantity: "10"},
{Name: "Bag", Price: "100", Quantity: "15"},
{Name: "Pen", Price: "15", Quantity: "13"}
];
I want to get the keys and values separately using ng-repeat in angular.js. I have tried the following code but its not working.
我想在 angular.js 中使用 ng-repeat 分别获取键和值。我已经尝试了以下代码，但它不起作用。
<tr ng-repeat="(key, val) in items">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
I believe the problem is with the braces '[' and ']'. Can anyone please suggest me how the issue can be resolved ?
我相信问题出在大括号“[”和“]”上。谁能建议我如何解决这个问题？
Edited:
编辑：
Thank you so much for the reply. I have tried your code and its working. But my real requirement is display the items as shown below.
非常感谢你的回复。我已经试过你的代码和它的工作。但我真正的要求是显示如下所示的项目。
Name Price Quantity
Soap 25 10
Bag 100 15
Pen 15 13
I am using some <tr>and <td>in html. But nothing getting displayd in screen. The codes are shown below.
我正在使用一些<tr>和<td>html。但屏幕上没有显示任何内容。代码如下所示。
<table>
<tr ng-repeat="item in items">
<tr ng-repeat="(key, val) in item">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
</tr>
</table>
I know that <tr>inside of another <tr>is not permitted by html. I tried by best.But no luck.
It will be great if you could help me in this.
Thanks in advance.
我知道html 不允许<tr>在另一个内部<tr>。我尽力了。但没有运气。如果你能在这方面帮助我，那就太好了。提前致谢。
回答by CD..
You've got an array of objects, so you'll need to use ng-repeattwice, like:
你有一个对象数组，所以你需要使用ng-repeat两次，比如：
<ul ng-repeat="item in items">
<li ng-repeat="(key, val) in item">
{{key}}: {{val}}
</li>
</ul>
Example: http://jsfiddle.net/Vwsej/
示例：http: //jsfiddle.net/Vwsej/
Edit:
编辑：
Note that properties order in objects are not guaranteed.
请注意，不保证对象中的属性顺序。
<table>
<tr>
<th ng-repeat="(key, val) in items[0]">{{key}}</th>
</tr>
<tr ng-repeat="item in items">
<td ng-repeat="(key, val) in item">{{val}}</td>
</tr>
</table>
Example: http://jsfiddle.net/Vwsej/2/
回答by arunmenon
I have just started checking out Angular(so im quite sure there are other ways to get it done which are more optimum), and i came across this question while searching for examples of ng-repeat.
我刚刚开始检查 Angular（所以我很确定还有其他更优化的方法来完成它），我在搜索 ng-repeat 的例子时遇到了这个问题。
The requirement by the poser(with the update):
装腔作势者的要求（有更新）：
"...but my real requirement is display the items as shown below.."
“......但我真正的要求是显示如下所示的项目......”
looked real-world enough (and simple), so i thought ill give it a spin and attempt to get the exact desired structure.
看起来足够真实（而且很简单），所以我认为我会尝试一下并尝试获得确切所需的结构。
angular.module('appTest', [])
.controller("repeatCtrl", function($scope) {
$scope.items = [{
Name: "Soap",
Price: "25",
Quantity: "10"
}, {
Name: "Bag",
Price: "100",
Quantity: "15"
}, {
Name: "Pen",
Price: "15",
Quantity: "13"
}];
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="appTest">
<section ng-controller="repeatCtrl">
<table>
<thead>
<tr ng-repeat="item in items | limitTo:1">
<th ng-repeat="(key, val) in item">
{{key}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td ng-repeat="(key, val) in item">
{{val}}
</td>
</tr>
</tbody>
</table>
</section>
</body>The limitTo:(n) filter is the key. Im still not sure if having multiple ng-repeat is an optimum way to go about it, but can't think of another alternative currently.
limitTo:(n) 过滤器是关键。我仍然不确定是否有多个 ng-repeat 是解决它的最佳方法，但目前想不出另一种选择。
回答by Ata ul Mustafa
Solution I have json object which has data
解决方案我有一个包含数据的 json 对象
[{"name":"Ata","email":"[email protected]"}]
You can use following approach to iterate through ng-repeat and use table format instead of list.
您可以使用以下方法遍历 ng-repeat 并使用表格格式而不是列表。
<div class="container" ng-controller="fetchdataCtrl">
<ul ng-repeat="item in numbers">
<li>
{{item.name}}: {{item.email}}
</li>
</ul>
</div>
回答by Rahul Mansharamani
try this..
尝试这个..
<tr ng-repeat='item in items'>
<td>{{item.Name}}</td>
<td>{{item.Price}}</td>
<td>{{item.Quantity}}</td>
</tr>
