Связывание областей вместе в угловых

У меня следующий тест, вместе взятые, что вытягивает из 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; 
        } 
       } 



      } 
     });

Вопросы, связанные с тем, что обсудили это с человеком, который намного более квалифицирован в Угловом, чем я, проблема, по-видимому, заключается в том, что функция не вытягивается из того же объема или чего-то подобного. PLUS, у меня действительно не может быть жестко закодированного массива, из которого можно получить вопросы. У меня уже есть Json для этого. Как заставить функцию validate фактически разговаривать с выбранными значениями в вопросах ?!

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

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

источник

2015-03-26 Varvara Jones

Что именно «проблема» –

Я не уверен, я понимаю вашу проблему, но я думаю, что вы должны быть инъекциями $ области в контроллере и использовать его: app.controller ('QuizCtrl', function ($ scope) ... –

Проблема в том, что функция validate() не работает. На консоли.log'ing любого из элементов в этом конкретном контроллере ничего не возвращается. Однако я пытаюсь захватить эти выбранные значения - он не работает. :( –

Пожалуйста, смотрите демо ниже, должно поможет вам.

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++; 
 
     } 
 

 
    }) 
 

 
    } 
 

 

 
});

<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>

источник

2015-03-26 21:25:32 sylwester

Это будет работать с моим текущим кодом (который я не могу опубликовать полностью из-за его огромности и ограничений компании) за исключением того, как работает ng-модель. Когда я устанавливаю его на ng-model = "answer.answerKey" на структуру json, он автоматически делает это так, что как только вы нажимаете на переключатель, все остальные вопросы выбираются без фактического нажатия на любой из них , –

Связывание областей вместе в угловых

ответ

Смежные вопросы