Javascript 如何禁用AngularJS中使用ng repeat创建的按钮子集?
我正在尝试使用AngularJS构建一个测验web应用程序。问答题的结构如下:Javascript 如何禁用AngularJS中使用ng repeat创建的按钮子集?,javascript,angularjs,Javascript,Angularjs,我正在尝试使用AngularJS构建一个测验web应用程序。问答题的结构如下: $scope.quiz = [ { 'q': 'For what period would archaeologists first begin to find permanent human settlements?', 'options': [{ 'value': 'The Paleolithic'} , { 'value': 'The Classical Era'} , {'value' :
$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 repeat来显示每个问题的问题和选项:
<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>
{{$index+1}}。{{问题}
{{option.value}}
当我单击某个选项时,我希望该问题的所有选项都被禁用,但如果我只是在ng click='submitOption()'
函数中设置ng disabled='true'
,所有问题的所有选项都将被禁用。如何使选项在我继续进行测验时一次对一个问题禁用
我一直在考虑将数据(question.q)从第一个ng repeat作用域传递到嵌套的ng repeat,并将属性
ng disabled='true'
仅添加到带有ng data='{{{question.q}}}'
的选项按钮中,尝试在测验中的问题中添加submitted
属性,然后将提交更改为回答问题
:
提交选项(option.value,问题)
在提交
中,您可以访问问题。回答和问题.q
并将问题。提交
设置为真
然后,您可以使用ng disabled='question.submitted'
仅禁用该问题的选项。改用单选按钮如何?