Обновление структуры данных в angularJS на основе другой структуры данных

Question

Я просто попал в angularJS и для своего первого проекта Im пытался создать создателя викторины. Я хочу, чтобы люди могли создавать результаты, вопросы, ответы и взвешенное сопоставление ответов на результаты. Мой HTML выглядит следующим образом:

<div ng-controller="QuizCtrl"> 

<div class="result" ng-repeat="result in quiz.results"> 
    <input ng-model="result.title" /> [<a href ng-click="quiz.results.splice($index, 1)">X</a>]<br /> 
</div> 

<div class="question row" ng-repeat="question in quiz.questions"> 
    <div class="col-sm-4 col-md-4 col-lg-4"> 
    <input ng-model="question.title" /> [<a href ng-click="quiz.questions.splice($index, 1)">X</a>]<br /> 
    <a href ng-click="addAnswer($index)">add answer</a> 
    </div> 
    <div class="col-sm-8 col-md-8 col-lg-8"> 
    <div class="answer" ng-repeat="answer in question.answers"> 
     <input ng-model="answer.title" /> [<a href ng-click="question.answers.splice($index, 1)">X</a>]<br /> 
     <div class="answerresult" ng-repeat="answerresult in answer.answerresults"> 
     {{ quiz.results[$index].title }}: 
     <select ng-change="answerresult.result = $index" ng-model="answerresult.weight" ng-options="i for i in [1,2,3]"></select> 
     </div> 
    </div> 
    </div> 
</div> 

</div> 

Основная структура данных выглядит следующим образом:

angular.module('testApp') 
    .controller('QuizCtrl', function ($scope) { 
    $scope.quiz = { 
     questions: [ 
      {title: 'question 1', answers: [ 
       {title: 'answer 1', answerresults:[ 
        {'result': 0, weight: 2}, 
        {'result': 1, weight: 3} 
       ]}, 
       {title: 'answer 3', answerresults:[ 
        {'result': 0, weight: 2}, 
        {'result': 1, weight: 2} 
       ]} 
      ]}, 
      {title: 'question 2', answers: [ 
       {title: 'answer 1', answerresults:[ 
        {'result': 0, weight: 1}, 
        {'result': 1, weight: 2} 
       ]}, 
       {title: 'answer 2', answerresults:[ 
        {'result': 0, weight: 2}, 
        {'result': 1, weight: 2} 
       ]}, 
       {title: 'answer 3', answerresults:[ 
        {'result': 0, weight: 1}, 
        {'result': 1, weight: 3} 
       ]} 
      ]} 
     ], 
     results: [ 
      {title: 'result 1'}, 
      {title: 'result 2'} 
     ], 
    }; 
}); 

Теперь мои вопросы:

1. Как обновить каждый «$ scope.quiz. Вопросы [x] .answers [y] .answerresults "массив, когда я добавляю или удаляю новый элемент в" $ scope.quiz.results "? Конечно, вложенные for-loop будут делать, но это не очень элегантно. Есть ли лучший способ использования угловой двусторонней привязки данных?
2. Как я могу представить отношение между «$ scope.quiz.questions [x] .answers [y] .answerresults [z] .result» и «$ scope.quiz.results [i]»? Прямо сейчас я просто установил это: ng-change = "answerresult.result = $ index" Обычная практика? Или есть какие-то лучшие способы?
3. Вместо того, чтобы повторять «$ scope.quiz.questions [x] .answers [y] .answerresults», возможно, он мог бы работать для перебора «$ scope.quiz.results», а затем динамически создавать массив resultresults для каждого ответ?

Заранее благодарим за ваши ответы и извините, если это глупые вопросы. Я просто нырнул в угловой вчера ..

Answer 1

Хорошо, я решил с вложенными петлями сейчас. Я не знаю, правильно ли это сделать в угловом режиме, но оно работает:

$scope.addResult = function() { 
    $scope.quiz.results.push({}); 

    for(var question in $scope.quiz.questions) { 
    for(var answer in $scope.quiz.questions[question].answers) { 
     $scope.quiz.questions[question].answers[answer].answerresults.push({}); 
    } 
    } 
}; 

$scope.removeResult = function(index) { 
    $scope.quiz.results.splice(index, 1); 

    for(var question in $scope.quiz.questions) { 
    for(var answer in $scope.quiz.questions[question].answers) { 
     $scope.quiz.questions[question].answers[answer].answerresults.splice(index, 1); 
    } 
    } 
};