Angular翻译：在json对象上重复
Angular翻译：在json对象上重复
我有一个像这样的json文件：
{
"pages": {
"page1": {
"field1": "....",
"field2": "....",
"field3": "....",
"thumbnails": [
{
"illustration": "images/img.png",
"content": "...."
},
{
"illustration": "images/img.png",
"content": "...."
},
{
"illustration": "images/img.png",
"content": "...."
}
]
},
......
}
当我想在我的html中使用它时，我只需要这样做：
{{ 'pages.page1.field1' | translate }}
但是，如果我需要重复使用缩略图怎么办？
{{ thumbnail.content }}
但是显然这样是无效的。我不知道如何访问缩略图。
编辑1：
我在我的配置中使用了"useStaticFilesLoader"，像这样：
$translateProvider.useStaticFilesLoader({
prefix: 'assets/app_components/app/languages/emag_',
suffix: '.json'
});
所以我没有在我的控制器中定义一个json。
编辑2：
为了更清楚，这里有一个我想要做的事情的plunkr：为了帮助你理解我的问题，我在这里制作了一个小的plunkr：[http://plnkr.co/edit/mocztnQYvmmuc3Nslmnb?p=preview](http://plnkr.co/edit/mocztnQYvmmuc3Nslmnb?p=preview)
Angular translate : repeat on json object问题的原因是json文件的格式有问题，需要将对象改为数组。解决方法是将对象改为数组格式。另外，ng-repeat只能用于数组，因为它需要知道长度。该问题还涉及到ng-repeat无法直接访问json文件的问题，需要通过控制器和$translate来实现。以下是原问题及解决方法的整理：
问题原因：
你的json文件格式错误，包含了对象在对象中。你需要将其改为数组格式。
解决方法：
尝试以下代码：
{
"thumbnails": [
{
"illustration": "images/img.png",
"content": "...."
},
{
"illustration": "images/img.png",
"content": "...."
},
{
"illustration": "images/img.png",
"content": "...."
}
]
}
我认为ng-repeat只能用于数组，因为ng-repeat需要知道长度。
其他问题：
类似的问题还出现在其他页面上，可以通过将对象改为数组来解决。
{
"pages": [
{
"fields": [
"...",
"...",
"...."
],
"thumbnails": [
{
"illustration": "image/img_01.png",
"content": "...."
},
{
"illustration": "image/img_01.png",
"content": "...."
},
{
"illustration": "image/img_01.png",
"content": "...."
}
]
}
]
}
解决方法是将json改为以下格式：
{
"pages": [
{
"fields": [
"...",
"...",
"...."
],
"thumbnails": [
{
"illustration": "image/img_01.png",
"content": "...."
},
{
"illustration": "image/img_01.png",
"content": "...."
},
{
"illustration": "image/img_01.png",
"content": "...."
}
]
}
]
}
还有一个问题是ng-repeat无法直接访问json文件。以下是一个示例：
我没有包含一个包含json对象pages的控制器，它是从angular translate自动加载的（参见"EDIT 1"）。
如果需要知道应用程序对JSON的某个位置是否有访问权限，可以输入{{pages[1]}}，然后添加{{pages[1].thumbnails}}，我需要第一个缩略图的URL{{pages[1].thumbnails[1].url}}，并检查结果。可以在这里link检查你的JSON。
为了帮助你理解我的问题，我在这里创建了一个小的plunkr：plnkr.co/edit/mocztnQYvmmuc3Nslmnb?p=preview
哦，好的，看起来useStaticFilesLoader无法读取数组（无法读取JSON）... 它转换为相同的常量或者是什么（NAMESPACE.SUBNAMESPACE.HEADLINE），它是这样的：
"NAMESPACE" : {"SUBNAMESPACE": {
"HEADLINE": "Text here...",
"SUBHEADLINE": "Text here.."
}
}
我尝试了一些"hack"，但是你需要知道缩略图的数量。创建一个控制器并使用$translate，然后可以使用如下代码：
$translate('YOUR_CONSTANT').then(function (translation) { "this code return promisse" });
这是一个plnkr的例子：plnkr.co/edit/TRN2xKbyOQTOce0Bq7Ou?p=preview...但这真的不是一个好的做法...只有在静态文本（如按钮、占位符等）中使用translate。其他文本从数据库中调用，例如`/restAPI/page/1?lang=en`。
等待更好的程序员，我是一个Angular的新手（15天），不知道什么是最佳实践。