Angular Json循环

Question

嗨,我是角色的新手我有以下要求.

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字段.请帮忙.

Answer 1

您可以使用(key, value) in object语法.

在你的情况下:

<div ng-repeat="(key1, value1) in fields">
    <li ng-repeat="(key2, value2) in value1">{{key2}} : {{value2}}</li>
</div>.

但是:

您需要知道JavaScript规范没有定义为对象返回的键的顺序.(为了在Angular 1.3中缓解这种情况,使用ngRepeat指令按字母顺序对键进行排序.)

版本1.4删除了字母排序.我们现在依赖于在myObj中运行key时浏览器返回的顺序.浏览器似乎通常遵循按照定义顺序提供密钥的策略,尽管在删除和恢复密钥时会有例外.请参阅 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete#Cross-browser_issues

如果不需要,建议的解决方法是将对象转换为一个数组,该数组在提供给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-model将value2在当前范围内更改,而不会在您的对象中更改,fields因为您不使用点表示法.

对于每个项目/迭代,ng-repeat创建一个新范围,该范围原型继承自父范围,但它还将项目的值分配给新子范围上的新属性.

更多细节: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>

看一看 !!!