ngTagsInput 似乎不支持 JSON 字符串中的对象
ngTagsInput does not seem to be supporting objects inside a JSON string
我的 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)
更新
您可以创建一个函数,以 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>
我的 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)
更新
您可以创建一个函数,以 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>