如何重复“键"只在 ngRepeat 中执行一次(AngularJS) [英] How to repeat "key" in ngRepeat one time only (AngularJS)

问题描述

问题出在来自后端/数据库的 JSON 数组响应中.我以正确的 json 格式得到数据库的响应:

<预><代码>[0:{等级":100，"AB001": 1,"AB002": 0,"AB003": 9,AB004":5},1:{等级":98，"AB001": 3,"AB002": 0,"AB003": 0,AB004":0}...](结果为 10 个对象)

因此在 Firebug 控制台中显示，当您单击 GET 请求的响应时.为了检索用双引号表示的键，我在视图中使用了 ngRepeat 指令，如下所示:

<tr ng-repeat="d 数据"><th ng-repeat="(key, value) in d">{{钥匙}}</th></tr></thead>...

唯一的问题是，密钥被重复了 10 次.但是我想重复这些键一次，这意味着例如 Grade 键在 th-tag 中仅出现一次，依此类推..

我该如何实现?我已经用 angular 的 forEach() 试过了，但它不是一个解决方案.

解决方案

如果数组中的每个对象都具有完全相同的键，则可以通过以下方式实现:

<tr><th ng-repeat="(key, value) in data[0]">{{钥匙}}</th></tr></thead>

在您的代码段中，您正在执行双循环，列出数组中每个元素的每个键.

The problem is leaving in the JSON Array response from the Backend/DB. I'm getting the response of the database in the correct json format:

[
  0: {
       "Grade": 100,
       "AB001": 1,
       "AB002": 0,
       "AB003": 9,
       "AB004": 5
     },
  1: {
       "Grade": 98,
       "AB001": 3,
       "AB002": 0,
       "AB003": 0,
       "AB004": 0
     }
...
] (10 objects as result)

Thus displayed in the Firebug console, when you click the Response of the GET Request. To retrieve the keys who are represented in double quotes I've used the ngRepeat directive in my view like following:

<thead>
  <tr ng-repeat="d in data">
      <th ng-repeat="(key, value) in d">
          {{key}}
      </th>
  </tr>
</thead>
...

Only the problem is, that the key gets repeated 10 times. But I want to repeat the keys one time that means for example the key Grade is only one time in a th-tag and so on..

How can I implement this? I've tried it with angular's forEach() but it wasn't a solution.

解决方案

If you have the exact same keys in each object in the array, you could achieve this with:

<thead>
  <tr>
    <th ng-repeat="(key, value) in data[0]">
        {{key}}
    </th>
  </tr>
</thead>

In your snippet you are doing a double loop, listing each key, for each element in the array.

这篇关于如何重复“键"只在 ngRepeat 中执行一次(AngularJS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！