ng-repeat中的Angular禁用过滤器按钮

时间:2021-04-15 19:46:01

i have an nested array multiple questions and answers, i want to disable the answers that are shown when the user clicks on an answer. I am using Ionic framework.

我有一个嵌套数组的多个问题和答案,我想禁用用户点击答案时显示的答案。我正在使用Ionic框架。

I have tired to use ng-disabled but cant get the buttons currently showing to get disable.

我已经厌倦了使用ng-disabled但是无法让当前显示的按钮被禁用。

Data

$scope.dummyData =
        [{
            qId:0,
            question:"What colour is captain haddock sweater?",
            value:2,
            answers:
                [{
                    aId:0,
                    name:"Blue",
                    value:1
                },
                {
                    aId:1,
                    name:"Yellow",
                    value:2
                },
                {
                    aId:2,
                    name:"Black",
                    value:3
                },
                {
                    aId:3,
                    name:"Green",
                    value:4
                }]
        }..];

Html

<ul ng-repeat="obj in dummyData | filterQuestions:[activeQuestion]" >
<li>{{obj.question}}</li>
  <ul ng-repeat="answers in obj.answers">      
   <li>
    <br/>
    <button class="button button-outline button-stable"  
       id="answers.aId" ng-click="checkAnswer(answers.value, answers.aId, obj.qId)">
              {{::answers.name}}
        </button>
       </li>
   </ul>
</ul>     

1 个解决方案

#1


1  

Try:

<ul ng-repeat="obj in dummyData | filterQuestions:[activeQuestion]" >
<li>{{obj.question}}</li>
  <ul ng-repeat="answers in obj.answers">      
   <li>
    <br/>
    <button ng-disabled="obj.answerChosen" class="button button-outline button-stable"  
       id="answers.aId" ng-click="checkAnswer(answers.value, answers.aId, obj.qId); obj.answerChosen = true;">
              {{::answers.name}}
        </button>
       </li>
   </ul>
</ul>     

#1


1  

Try:

<ul ng-repeat="obj in dummyData | filterQuestions:[activeQuestion]" >
<li>{{obj.question}}</li>
  <ul ng-repeat="answers in obj.answers">      
   <li>
    <br/>
    <button ng-disabled="obj.answerChosen" class="button button-outline button-stable"  
       id="answers.aId" ng-click="checkAnswer(answers.value, answers.aId, obj.qId); obj.answerChosen = true;">
              {{::answers.name}}
        </button>
       </li>
   </ul>
</ul>