如何使用ng-Repeat对数组对象进行角度转换？

Question

I am currently working on an Angular project with the plugin angular translate from Pascal Precht. I have an FAQ page which has a tabs for answer. What I want to achieve is to have a dynamic values for questions. So that I will just have a loop for those questions and those questions will be in a translation file as Json array. here is my sample json file.

"FAQS_QUESTION"  : [
   {
     "question" : "Question 1?",
     "answer"   : "Answer 1 "
   },
   {
     "question" : "Question 2?",
     "answer"   : "Answer 2" 
   },
   {
     "question" : "Question 3?",
     "answer"   : "Answer 3" 
   }
]

I tried the code below but it is not working. I get a "angular.js:14525 Translation for FAQS_QUESTION doesn't exist"

ul( ng-repeat="thumbnail in 'FAQS_QUESTION' | translate ")
   li 
       | {{thumbnail.question}}
       | {{thumbnail.answer}}

I Also tried loading it in my Controller with no luck

$translate('FAQS_QUESTION').then(function (translations) {
    console.log(translations.questions);
}, function (translationIds) {
    console.log(translationIds);
});

I found a workaround and the implementation is like this:

ul(ng-init="count = ('FAQS_QUESTION_COUNT' | translate)")
  li(ng-repeat="item in getQuestionCount(count) track by $index")
     p(translate="FAQS_QUESTION.{{$index}}.question")
     p(translate="FAQS_QUESTION.{{$index}}.answer")

It solves my problem. But it will be a tedious for maintenance to indicate the count for each Iteration. Since we are planning to have a section for each quetions

Can anyone help me for the workaround for this one? I am not sure I appreciate all your help. Thanks

Answer 1

In this snippet

ul( ng-repeat="thumbnail in 'FAQS_QUESTION' | translate ")
   li 
       | {{thumbnail.question}}
       | {{thumbnail.answer}}

your value 'FAQS_QUESTION' is just a plain string, so you're not referencing your data. Also, the translate -filter doesn't work with collections i believe.

Instead, try doing something like this:

ul( ng-repeat="thumbnail in FAQS_QUESTION")
   li 
       | {{thumbnail.question | translate}}
       | {{thumbnail.answer | translate}}