AngularJS Array ng-repeat 问题答案

【问题标题】：AngularJS Array ng-repeat issueAngularJS Array ng-repeat 问题
【发布时间】：2016-10-01 12:06:48
【问题描述】：

我有一个像这样从 php 返回的 json 数据：

[
{
    "id": 143,
    "sender": "btknctTR",
    "title": "Batıkan Bu nedir bu bu ne bu",
    "date": "Jun 11, 2016 6:47:21 AM",
    "lastupdatedate": "Jun 11, 2016 1:48:54 PM",
    "category": "Sorular",
    "priority": "Kritik",
    "appointedRole": "Moderatör",
    "archived": true,
    "messages": [
        {
            "sender": "btknctTR",
            "message": "Test message",
            "date": "Jun 11, 2016 1:48:30 PM"
        },
        {
            "sender": "btknctTR",
            "message": "This i second test message",
            "date": "Jun 11, 2016 1:48:54 PM"
        }
    ]
},
{
    "id": 198,
    "sender": "btknctTR",
    "title": "Yeni yeni yeniden",
    "date": "Jun 11, 2016 12:53:32 PM",
    "lastupdatedate": "Jun 11, 2016 8:18:39 PM",
    "category": "Diger",
    "priority": "Normal",
    "appointedRole": "Moderatör",
    "archived": true,
    "messages": [
        {
            "sender": "btknctTR",
            "message": "Yeni yeni yenidenYeni yeni yenidenYeni yeni yenidenYeni yeni yenidenYeni yeni yenidenYeni yeni yenidenYeni yeni yenidenYeni yeni yenidenYeni yeni yenidenYeni yeni yeniden",
            "date": "Jun 11, 2016 7:54:41 PM"
        },
        {
            "sender": "DonduranAtes",
            "message": "asdasd\r\n",
            "date": "Jun 11, 2016 7:54:50 PM"
        },
        {
            "sender": "btknctTR",
            "message": "sadasdasdasd",
            "date": "Jun 11, 2016 7:55:14 PM"
        }
    ]
},
{
    "id": 3810,
    "sender": "btkncttr",
    "title": "asdasdasdasdas",
    "date": "Aug 6, 2016 10:55:36 AM",
    "lastupdatedate": "Aug 7, 2016 10:33:19 PM",
    "category": "Diger",
    "priority": "Normal",
    "appointedRole": "Moderatör",
    "archived": true,
    "messages": [
        {
            "sender": "btkncttr",
            "message": "This is the message",
            "date": "Aug 6, 2016 10:57:07 AM"
        },
        {
            "sender": "player",
            "message": "This is the message tooo",
            "date": "Aug 6, 2016 10:57:07 AM"
        }
    ]
}
]

但我无法找到如何 ng-repeat theese。当我写 {{data.sender}} 在控制台中返回错误 [ngRepeat:dupes]。

我需要在工单列表页面中列出这些值，这是用户的支持系统。

【问题讨论】：

ng-repeat="item in data | track by $index" - 尝试 TRACK BY )
请显示所有相关代码
ng-repeat="data in datas" 跟踪 $index
不要在问题中发布 "Solution"..您接受一个答案来指出最适合您的方法

标签： angularjs json ng-repeat

【解决方案1】：

您在控制台中收到 [ngRepeat:dupes] 错误，因为数据中有一些重复项。

如果你想遍历所有数据并显示sender，你可以这样做

<div ng-repeat="data in jsonData track by $index">{{data.sender}}</div>

$index 使用数组中对象的索引来跟踪数组中的每个对象。

【讨论】：

这是完全正确的答案。

【解决方案2】：

假设您的对象位于变量 $scope.data 的值中。

然后你可以在你的 html 中使用 angular 来渲染它，如下所示：

<div ng-repeat="item in data track by $index">
    {{ item.id }}
</div>

更新：确实，对于这个特定的错误，您需要通过 $index 进行跟踪

【讨论】：

<tr ng-repeat="data in datas"> <td >{{data.id}}</td> </tr> 我已经在尝试了。错误angular.js:13920 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.8/ngRepeat/dupes?p0=dataa%20in%20datas&p1=object%3Anull&p2=null
ng-repeat="data in datas" track by $index
@Akis 这种类型是真的ng-repeat="data in datas track by $index" 谢谢你的回答，谢谢你的解决方案@Akis
@BatıkanGençACAT 给出了答案并给出了解释，请继续更新

【解决方案3】：

试试这个， Here is working fiddle。
还要检查 Angular 版本，它应该至少是 1.2，因为它是在那个版本中引入的。

 <div ng-controller="MyCtrl">
  <div ng-repeat="data in datas track by $index">
    Sender : {{data.sender}}
    <br> Messages :<br>
    <div ng-repeat="(mindex, mvalue) in data.messages">
       {{mindex+1}}. {{mvalue.message}} - {{mvalue.date}}
    </div>
    <br>
  </div>
</div>

【讨论】：