AngularJS에서 ng-repeat를 사용하여 만든 버튼의 하위 집합을 비활성화하려면 어떻게합니까?

Question

AngularJS를 사용하여 퀴즈 웹 응용 프로그램을 만들려고합니다. 퀴즈 질문은 다음과 같이 구성되어 있습니다 :

$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 
    } 
]; 

내가 각 질문에 대한 질문과 옵션을 보여 중첩 된 NG 반복의를 사용 : 나는 옵션을 클릭하면

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

가, 내가 원하는 모든 옵션 그 질문을 사용할 수 없도록 설정했는데 을 ng-click='submitOption()' 함수에 설정하면 모든 질문에 대한 모든 옵션이 비활성화됩니다. 퀴즈를 진행하면서 한 번에 하나의 질문에 대해 옵션이 비활성화되도록하려면 어떻게해야합니까?

첫 번째 ng-repeat 범위의 데이터 (question.q)를 중첩 된 ng-repeat에 전달하고 ng-disabled='true'이라는 속성을 ng-data='{{question.q}}'의 옵션 버튼에만 추가하려고 생각했습니다. 퀴즈 질문에 submitted 속성을 추가

Answer 1

시도 후 question를 취할 submitOption 변경 :

submitOption(option.value, question)

submitOption에서, 당신은 question.answer 및 question.q 및 true에 question.submitted 설정에 액세스 할 수 있습니다.

그런 다음 ng-disabled='question.submitted'을 사용하여 해당 질문에 대한 옵션 만 비활성화 할 수 있습니다.