Angular - how to switch between expressions without losing user input - angularjs

Question

I'm new to Angular so please ELI5 if possible :)
I have a multiple-choice questionnaire with the setup for each question as below:
Question
Choice A
Choice B
Choice C
My controllers look like this:
scope.questionnaire = [
{
questionEN: "Thing?",
choice1EN: "Yes",
choice2EN: "No",
choice3EN: "Maybe",
questionPR: "Treasure?",
choice1PR: "Yarrr",
choice2PR: "Arrrrr",
choice3PR: "Parrrrley"
}
]
My current questionnaire looks like this:
<div ng-bind="questionnaire.questionEN"></div>
<input type="radio" name="{{questionnaire.questionEN}}" ng-model="questionnaire.choice" ng-value="questionnaire.choice1EN">{{questionnaire.choice1EN}}</input> <br />
<input type="radio" name="{{questionnaire.questionEN}}" ng-model="questionnaire.choice" ng-value="questionnaire.choice2EN">{{questionnaire.choice2EN}}</input> <br />
<input type="radio" name="{{questionnaire.questionEN}}" ng-model="questionnaire.choice" ng-value="questionnaire.choice3EN">{{questionnaire.choice3EN}}</input>
What I want to do is that at the start of the questionnaire, there are two buttons that will let the user select between languages.
[English] [Pirate]
So I have two questions, actually:
How do I do the language swapping without losing the user input (for example: they have answered questions 1-5 in [English], and while reading #6, scroll back up and hit the button to swap to [Pirate]. Their selected answers for 1-5 should remain, but all questions+choices have been "translated").
Is there a better way of arranging my controllers?

Answer 1

The answer to this really varies on your particular set of needs. Start with developing a logical model of the problem you are trying to solve.
Things to ask yourself:
Are the questions dynamic (loaded from a database) or static?
How do I need to store the answer? Can I store a choice ID, key, etc. or do I have to use the human readable value?
Does the model that captures the answers have to be different than the model that presents the question?
Do you need to store the language they selected along with the answers?
As you think about it more, other questions will follow.
Anyways, to give you something close to an answer here is a suggestion. If the questions are dynamic, you'll want to create a better structure for defining questions and the choices that are related to them. I'd also give them a key or ID so they can be referred to as concrete concepts. Not only does this help tie the model to database entries, making storing and retrieving easy, it makes it easier for you to handle the language issue.
Here's an example of such a design. You may wish to track the answers separately if your design requires, in my case I just kept it simple and kept the questions and answers in one model.
The question model is an array of objects that look like this:
{
key: 'q1', // unique key for question
text: { // a dictionary of language codes and the text of the question in that language
'en': 'What is the answer the question 1?',
'pr': 'Ahoy 1?'
},
choices: [{
key: 'q1a1', // a unique key for the choice
text: { // a dictionary of language codes and the text of the choice in that language
'en': 'Answer 1',
'pr': 'Arr 1'
}
}, {
key: 'q1a2',
text: {
'en': 'Answer 2',
'pr': 'Arr 2'
}
}],
value: null // the field that stores the user's selected choice
}
There is a helper function to get the language-specific text of the selected choice:
$scope.getAnswer = function(question) {
var answer = $filter('filter')(question.choices, {key: question.value});
if (answer.length == 1) return answer[0].text[$scope.selectedLanguage];
return '(no answer)';
};
The meat of your HTML template that displays the questions looks like this:
<div ng-repeat="question in model">
<label>{{question.text[selectedLanguage]}}</label>
<div>
<label ng-repeat="choice in question.choices">
<input type="radio" name="{{question.key}}" ng-value="choice.key" ng-model="question.value" />{{choice.text[selectedLanguage]}}
</label>
</div>
</div>
Alternative
For the heck of it, here's yet another example of how you might do it. This method is useful if you do not have dynamic question/choice data, but with some effort could still be used for dynamic data. It involves keeping localized UI strings in separate tables, assigning questions and choices unique keys, and then using a translation service to retrieve the correct string. In this example, I use the angular-translate module. I load it with tables of localization strings during .config of my module, specify a default language, and just use the translate filter when displaying questions and choices. This lets me greatly simplify my question model and get rid of some extra work in the views and controller.
My questions simply become:
{
key: 'q1',
choices: [
'q1a1',
'q1a2'
],
value: null
}
I add a watch on the language dropdown to change the current language:
$scope.$watch('selectedLanguage', function(value) {
if (value === null) return;
$translate.use(value);
});
And clean up the template:
<label>{{question.key | translate }}</label>
<div>
<label ng-repeat="choice in question.choices">
<input type="radio" name="{{question.key}}" ng-value="choice" ng-model="question.value" />{{ choice | translate }}
</label>
</div>

Answer 2

You could add a function using ng-click then set your $scope to a new questionnaire.
So you would have something like this:
var english = {
question: "Thing?",
answers: {
choice1: {text: "Yes", val: 1},
choice2: {text: "No", val: 2},
choice3: {text: "Maybe", val: 3}
}
}
var pirate= {
question: "Treasure?",
answers: {
choice1: {text: "Yarrr", val: 1},
choice2: {text: "Arrrrr", val: 2},
choice3: {text: "Parrrrley", val: 3}
}
}
// default
$scope.questionnaire = english;
$scope.choice;
// change language
$scope.changeLanguage = function (lang) {
switch (lang) {
case 0:
$scope.questionnaire = english;
break;
case 1:
$scope.questionnaire = pirate;
break;
}
}
Then for your buttons
<button ng-click="changeLanguage(0)">English</button>
<button ng-click="changeLanguage(1)">Pirate</button>
and finally, I would suggest using ng-repeat in your questionnaire
<div ng-bind="questionnaire.question"></div>
<label ng-repeat="answer in questionnaire.answers" ><input type="radio" name="{{questionnaire.question}}" ng-model="choice" ng-value="answer.val" />{{answer.text}} <br /></label>