我有JSON Array对象,如下所示.
$scope.items =
[
{Name: "Soap", Price: "25", Quantity: "10"},
{Name: "Bag", Price: "100", Quantity: "15"},
{Name: "Pen", Price: "15", Quantity: "13"}
];
我想在angular.js中使用ng-repeat分别获取键和值.我尝试了以下代码,但它无法正常工作.
<tr ng-repeat="(key, val) in items">
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
我认为问题在于大括号'['和']'.任何人都可以建议我如何解决问题？
非常感谢你的回复.我已经尝试过您的代码及其工作原理.但我真正的要求是显示如下所示的项目.
Name Price Quantity
Soap 25 10
Bag 100 15
Pen 15 13
我正在使用一些<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>
我知道html不允许<tr>在另一个内部<tr>.我最好的尝试.但没有运气.如果你可以帮助我,那将是很棒的.提前致谢.
CD.*_*D.. 54
你有一个对象数组,所以你需要使用ng-repeat两次,比如:
<ul ng-repeat="item in items">
<li ng-repeat="(key, val) in item">
{{key}}: {{val}}
</li>
</ul>
请注意,不保证对象中的属性顺序.
<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>
示例:http://jsfiddle.net/Vwsej/2/
我刚刚开始检查Angular(所以我很确定还有其他方法可以完成它,这是更优化的),我在搜索ng-repeat的例子时遇到了这个问题.
装腔作势者的要求(随更新):
"......但我真正的要求是显示如下所示的项目......"
看起来真实世界(和简单),所以我认为不好给它一个旋转,并试图获得确切的所需结构.
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>limitTo:(n)过滤器是关键.我仍然不确定是否有多次ng-repeat是一种最佳方式,但目前还不能想到另一种替代方案.
| 归档时间： |
|
| 查看次数： |
117412 次 |
| 最近记录： |