CODEWITHSUNDEEP
javascriptangularjs
photon
photon

Reputation: 616

How can I disable a subset of buttons which were created using ng-repeat in AngularJS?

I am trying to build a quiz web application using AngularJS. The quiz questions are structured like this:

$scope.quiz = [
  {
    'q': 'For what period would archaeologists first begin to find permanent human settlements?',
    'options': [{ 'value': 'The Paleolithic'} , { 'value': 'The Classical Era'} , {'value' : 'The Bronze Age'} , { 'value': 'The Neolithic'}],
    'answer': 'The Neolithic',
    'difficulty': 2
  },
  {
    'q': 'Which of the following civilizations shares the most in common with the Harappan civilization found in the Indus River Valley?',
    'options':[{ 'value': 'The Mogul Empire in India'} , { 'value': 'The Tokugawa Shogunate in Japan'} , {'value' : 'The Olmec civilization in Mesoamerica'} , { 'value': 'The Athenian city- state in ancient Greece'}],
    'answer': 'The Olmec civilization in Mesoamerica',
    'difficulty': 6
  },
  {
    'q': 'Identify the important original contribution of the Hebrew culture to the civilizations in the Middle East and Mediterranean during the Classical Period.',
    'options':[{ 'value': 'Monotheism'} ,{ 'value': 'Written legal code'} , {'value' : 'Phonetic alphabet'} , { 'value': 'Priest caste'}],
    'answer': 'Monotheism',
    'difficulty': 5
  },
  {
    'q': 'Confucianism established political and social systems in China while what other philosophy contributed significantly to China’s medical practices and art and architecture?',
    'options':[{ 'value': 'Legalism'} ,{ 'value': 'Shintoism'} , {'value' : 'Hinduism'} , { 'value': 'Daoism'}],
    'answer':'Daoism',
    'difficulty': 3
  }
];

I use nested ng-repeat's to show the questions and options for each question:

<div class='question' ng-repeat='question in quiz | orderBy: difficulty' value='{{$index}}'>
    <h3>{{$index+1}}. {{question.q}}</h3>
    <button type='button' class='btn btn-default btn-block' ng-repeat='option in question.options' ng-click='submitOption(option.value, question.answer, question.q)' ng-disabled='' ng-data='{{question.q}}'>
        <input type='checkbox'> <strong>{{option.value}}</strong>
    </button>
</div>

When I click on an option, I want all the options for that questions to be disabled, but if I simply set ng-disabled='true' in the ng-click='submitOption()' function, all options for all questions will be disabled. How can I make it so that the options are disabled for one question at a time as I proceed with the quiz?

I have been thinking of passing data (question.q) from the first ng-repeat scope to the nested ng-repeat and adding the attribute ng-disabled='true' only to the option buttons with ng-data='{{question.q}}'.

Upvotes: 0

Views: 75

Answers (1)

Jeff Ogata
Jeff Ogata

Reputation: 57783

Try adding a submitted property to questions in the quiz, then changing submitOption to take question:

submitOption(option.value, question)

In submitOption, you can access question.answer and question.q and set question.submitted to true.

You can then use ng-disabled='question.submitted' to disable the options for that question only.

Upvotes: 1

Related Questions