Question

我正在将以下测验放在一起，从json中提取并提供问题选项等。

            <div ng-repeat="question in module.questions | filter:{'number':module.path.subsection}" class="questionContainer {{question.class}}">
                <p ng-bind-html="question.title"></p>
                <label ng-repeat="answer in question.answers">
                    <input type="radio"
                           name="{{ question.title }}"
                           value="answer"
                           ng-model="qCtrl.selectedAnswers[question.title]">
                    <div class="question-box">{{ answer.answerLabel }}</div>
                    <!--<div class="{{ quizModel }}" ng-click="seeModel(module, section, subsection, question, quizModel)"></div>-->
                    <div class="clearBoth"></div>
                </label>
            </div>
            <button ng-click="validate()">Submit</button><br />

            <p ng-if='qCtrl.totalQuestions'>{{ correctAnswers }}/{{ totalQuestions }} were correct.</p>
            </div>

我有这个控制器：

.controller('QuizCtrl',
        function() {
            var ctrl = this;

            this.selectedAnswers = {};

            this.questions = [{
                'title': 'Question 1 ?',
                'answers': [{
                    'title': 'Answer 1',
                    'correct': false,
                }, {
                    'title': 'Answer 2',
                    'correct': true,
                }]
            }, {
                'title': 'Question 2 ?',
                'answers': [{
                    'title': 'Answer 1',
                    'correct': false,
                }, {
                    'title': 'Answer 2',
                    'correct': true,
                }]
            }]

            this.validate = function() {
                ctrl.correctAnswers = 0;
                ctrl.totalQuestions = ctrl.questions.length;

                for (var answer in ctrl.selectedAnswers) {
                    answerObj = ctrl.selectedAnswers[answer]
                    if (answerObj.correct) {
                        ctrl.correctAnswers += 1;
                    }
                }



            }
        });

问题是，与Angular比我更熟练的人讨论过这个问题，这个问题似乎是通过功能而不是从同一范围或类似的范围拉出来的。加上，我真的不能用硬编码的数组来提问。我已经有了Json。如何使验证功能实际与问题中的选定值对话？！

Json结构如下：

sections: [
 subSections:[
  "questions":[
     "title":"a",
     "number":"b",
     "name":"c",
     "answers":[
       {
        "answerKey": "true",
        "answerLabel": "true"
       },
       {
         "answerKey": "false",
         "answerLabel": "false"
       }
     ]
   ] 
 ]
]

Answer 1

请参阅以下有助于您的演示。

＆＃13;

var app = angular.module('app', []);

app.controller('firstCtrl', function($scope) {
  var vm = this;

  vm.answears = [];
  vm.questions = [{
    'id': '1',
    'title': 'Question 1 ?',
    'answers': [{
      'title': 'Answer 1',
      'correct': false,
    }, {
      'title': 'Answer 2',
      'correct': true,
    }]
  }, {
    'id': '2',
    'title': 'Question 2 ?',
    'answers': [{
      'title': 'Answer 1',
      'correct': false,
    }, {
      'title': 'Answer 2',
      'correct': true,
    }]
  }];

  vm.validate = function() {
    vm.correctAnswers = 0;
    vm.totalQuestions = vm.questions.length;
    angular.forEach(vm.answears, function(correct) {

      if (correct) {
        vm.correctAnswers++;
      }

    })

  }


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl as vm">
    <div ng-repeat="question in vm.questions" ng-init="index= $index">
      <p>{{question.title}}</p>
      <div ng-repeat="answer in question.answers">
        <label>{{ answer.title }}
          <input type="radio" name="{{question.title}}" ng-value="answer.correct" ng-model="vm.answears[index]" />
        </label>
      </div>
    </div>
    <button ng-click="vm.validate()">Submit</button>
    <br /> <pre>{{vm.qCtrl}}</pre>

    <p ng-show="vm.totalQuestions">{{ vm.correctAnswers }}/{{ vm.totalQuestions }} were correct.</p>
  </div>
</body>

＆＃13;

在Angular中将范围链接在一起

1 个答案: