object.id 的角度轨道

Angular track by object.id

本文关键字：轨道 id object      更新时间：2023-09-26

我从REST api接收了以下JSON数据。 

 [
  {
    "names": {
      "en": "test123"
    },
    "children": [],
    "id": "68d87e8c-42f5-4f11-b25a-b30624246c3b",
    "version": 1,
    "code": "0",
    "order": 0,
    "country": "HR",
    "name": "test123",
    "parent": null,
    "selected": false,
    "hasQuestions": false,
    "level": 1,
    "state": "original",
    "hasChildChapters": false
  },
  {
    "names": {
      "en": "test456"
    },
    "children": [],
    "id": "d175e6d1-874e-4909-afb2-790c0a940c3f",
    "version": 1,
    "code": "0",
    "order": 0,
    "country": "HR",
    "name": "test456",
    "parent": null,
    "selected": false,
    "hasQuestions": false,
    "level": 1,
    "state": "original",
    "hasChildChapters": false
  }
]

我正在尝试使用指令 ng-repeat 显示它。按 object.id 使用跟踪。它是这样用的：

<tr ng-repeat="chapter in chapters | filter: search track by chapter.id">

但问题是ngRepeat：Dupes错误仍然出现。我已经检查了 JSON 中包含的数据，但其中没有重复的 id。你知道为什么ngRepeat：Dupes错误仍然存在吗？

根据给出的数据，没有抛出重复的错误，下面是jsfiddle。

<div ng-controller="MainCtrl">
    <input type="text" ng-model="search">
    <div ng-repeat="chapter in chapters | filter: search track by chapter.id">{{chapter.id}}</div>
</div>

控制器

$scope.chapters = [{
        "names": {
            "en": "test123"
        },
            "children": [],
            "id": "68d87e8c-42f5-4f11-b25a-b30624246c3b",
            "version": 1,
            "code": "0",
            "order": 0,
            "country": "HR",
            "name": "test123",
            "parent": null,
            "selected": false,
            "hasQuestions": false,
            "level": 1,
            "state": "original",
            "hasChildChapters": false
    }, {
        "names": {
            "en": "test456"
        },
            "children": [],
            "id": "d175e6d1-874e-4909-afb2-790c0a940c3f",
            "version": 1,
            "code": "0",
            "order": 0,
            "country": "HR",
            "name": "test456",
            "parent": null,
            "selected": false,
            "hasQuestions": false,
            "level": 1,
            "state": "original",
            "hasChildChapters": false
    }]

http://jsfiddle.net/75sdsuz2/2/

相关文章：