0

angularJS に入ったばかりで、最初のプロジェクトでクイズ作成者を作成しようとしています。結果、質問、回答、および結果に対する回答の重み付けされたマッピングを作成できるようにしたいと考えています。私の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.results」に新しいアイテムを追加または削除するたびに、各「$scope.quiz.questions[x].answers[y].answerresults」配列を更新するにはどうすればよいですか? もちろん、ネストされた for ループで十分ですが、それはあまりエレガントではありません。Angular の双方向データ バインディングを使用するより良い方法はありますか?
  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」を反復処理してから、回答ごとに動的に answerresults 配列を作成することもできますか?

回答ありがとうございます。これがばかげた質問である場合は申し訳ありません。昨日Angularに飛び込みました..

4

1 に答える 1

0

わかりました、ネストされた for ループで解決しました。それが角度で行う正しい方法かどうかはわかりませんが、機能します：

$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);
    }
  }
};
于 2015-03-11T08:26:54.137 に答える