ngTagsInput 似乎不支持 JSON 字符串中的对象

Question

我的 CakePHP 应用程序生成我所有类别的 JSON 输出，如下所示：

{
    "categories": [
        {
            "Category": {
                "id": "7",
                "name": "Elektronics"
            }
        },
        {
            "Category": {
                "id": "8",
                "name": "Gym"
            }
        },
        {
            "Category": {
                "id": "4",
                "name": "Nightlife"
            }
        },
        {
            "Category": {
                "id": "6",
                "name": "Shopping "
            }
        },
        {
            "Category": {
                "id": "2",
                "name": "Sport"
            }
        }
    ]
}

如何将这些数据与 ngTagsInput 插件一起使用？我像这样尝试过，但它总是显示错误。它似乎无法处理多个对象。

<label class="item item-input item-stacked-label">
  <span class="input-label">Categories</span>
  <tags-input ng-model="tags" display-property="Category.name" placeholder="New Category">
    <auto-complete source="loadTags($query)"></auto-complete>
  </tags-input>
</label>

错误：

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: tag in tagList.items track by track(tag), Duplicate key: undefined, Duplicate value: {"Category":{"id":"7","name":"Electronics"}}
http://errors.angularjs.org/1.4.3/ngRepeat/dupes?p0=tag%20in%20tagList.item…2%3A%7B%22id%22%3A%225%22%2C%22name%22%3A%22Essen%20und%20Trinken%22%7D%7D
    at ionic.bundle.js:8900
    at ngRepeatAction (ionic.bundle.js:35974)
    at Object.$watchCollectionAction [as fn] (ionic.bundle.js:24382)
    at Scope.$digest (ionic.bundle.js:24515)
    at Scope.$apply (ionic.bundle.js:24783)
    at done (ionic.bundle.js:19196)
    at completeRequest (ionic.bundle.js:19368)
    at XMLHttpRequest.requestLoaded (ionic.bundle.js:19309)

Answer 1

更新

您可以创建一个函数，将您的对象转换为tags-input 可以理解的形式。

var object = {
    "categories": [
        {
            "Category": {
                "id": "7",
                "name": "Elektronics"
            }
        },
        {
            "Category": {
                "id": "8",
                "name": "Gym"
            }
        },
        {
            "Category": {
                "id": "4",
                "name": "Nightlife"
            }
        },
        {
            "Category": {
                "id": "6",
                "name": "Shopping "
            }
        },
        {
            "Category": {
                "id": "2",
                "name": "Sport"
            }
        }
    ]
};

var categories = [];

for(var i = 0; i < object.categories.length; i++){
  var category = object.categories[i].Category;
  var categoryToPush = {
    id: category.id,
    name: category.name
  };
  categories.push(categoryToPush);
}

categories 将包含：

[{
    "id": "7",
    "name": "Elektronics"
}, {
    "id": "8",
    "name": "Gym"
}, {
    "id": "4",
    "name": "Nightlife"
}, {
    "id": "6",
    "name": "Shopping "
}, {
    "id": "2",
    "name": "Sport"
}]

那么你可以在指令编写中使用它：

<tags-input ng-model="tags" display-property="name">
  <auto-complete source="loadTags($query)"></auto-complete>
</tags-input>

老答案

添加key-property 值：

<tags-input ng-model="tags" display-property="Category.name" key-property="Category.id" placeholder="New Category">
  <auto-complete source="loadTags($query)"></auto-complete>
</tags-input>

Similar issue.