角Json循环
你好，我是新来的角，我有一个要求如下。
app.js
$scope.fields = {
"fields": {
"LastName1": "ABC",
"FirstName1": "XYZ",
"LastName2": "123",
"FirstName2": "345",
"LastName3": "PQR",
"FirstName3": "ASD",
}
};在我的html中，我需要循环这个并显示在
index.html
<tr ng-repeat="key in fields">这似乎不管用。请帮帮忙。
我想要我的输出
LastName1 ABC
FirstName1 XYZ诸若此类。
另外，如果用户对此做了任何更改，我希望能够将更改推回Json字段。请帮帮忙。
回答 3
Stack Overflow用户
发布于 2015-07-01 07:48:25
您可以使用(key, value) in object语法。
你的例子中的 :
<div ng-repeat="(key1, value1) in fields">
<li ng-repeat="(key2, value2) in value1">{{key2}} : {{value2}}</li>
</div>.但是：
您需要注意的是，JavaScript规范没有定义对象返回的键的顺序。(为了在角1.3中减轻这一点，ngRepeat指令用于按字母顺序对键进行排序。) 版本1.4删除了字母排序。我们现在依赖于浏览器在myObj中运行密钥时返回的顺序。浏览器似乎通常遵循按定义键的顺序提供密钥的策略，尽管在删除和恢复键时也会出现异常。请参阅问题 如果不希望这样做，建议的解决方法是将对象转换为一个数组，该数组在提供给ngRepeat之前按照您喜欢的顺序排序。您可以使用过滤器(如toArrayFilter )来完成此操作，也可以自己在对象上实现$watch。
更多细节：https://docs.angularjs.org/api/ng/directive/ngRepeat
编辑:如果你现在想改变对象怎么办?
你做不到:
<div ng-repeat="(key1, value1) in fields">
<h3>{{key1}}</h2>
<li ng-repeat="(key2, value2) in value1">
<input ng-model="value2" /><br />
{{key2}} : {{value2}}
</li>
</div>为什么？因为ng模型将更改当前作用域中的value2，而不是对象fields中的，因为您不使用点表示法。
对于每个项/迭代，ng-重复创建一个新的作用域，该范围通常是从父作用域继承的，但它也将项的值分配给新子作用域上的新属性。
更多细节：https://github.com/angular/angular.js/wiki/Understanding-Scopes
但是你可以做：
<div ng-repeat="(key1, value1) in fields">
<h3>{{key1}}</h2>
<li ng-repeat="(key2, value2) in value1">
<input ng-model="fields[key1][key2]" /><br />
{{key2}} : {{value2}}
</li>
</div>Stack Overflow用户
发布于 2015-07-01 07:57:29
试着改为：
<tr ng-repeat="(key, value) in fields.fields">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>下面是一个可以更新模型的工作柱塞：http://jsfiddle.net/ttgfybk0/1/
Stack Overflow用户
发布于 2015-07-01 08:04:18
重复数据采用对象格式，如
{
"LastName1": "ABC",
"FirstName1": "XYZ",
"LastName2": "123",
"FirstName2": "345",
"LastName3": "PQR",
"FirstName3": "ASD",
}使用ng-repeat="(key, value) in expression"
<tr ng-repeat="(key, value) in fields.fields">
<td>{{key}} {{value}}</td>
</tr>https://stackoverflow.com/questions/31155428
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号