ng-checked單選按鈕

Question

我正在制作一個測驗應用程序，為了顯示測驗的進度，有一個小盒子的問題托盤，當用戶單擊任何單選按鈕以表明用戶已經嘗試了問題時，這些盒子會變成黃色。按鈕以移至上一個問題。為顯示用戶的初始答案，我在控制器中使用了ng-checked指令並帶有一些邏輯。一切正常，但嘗試輸入一個問題后，我移至下一個問題並單擊相同的按鈕選項作為上一個問題，則問題調色板框不會變為黃色。但是當我單擊另一個選項時，它可以正常工作。

html的

<div  class="questionsBox" >
        <div class="questions">{{liveCtrl.questions[liveCtrl.activeQuestion].question}}</div>
        <ul class="answerList">
            <li>
                <label>
                    <input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===1" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,1)" name="answerGroup" value="0" >&nbsp;{{liveCtrl.questions[liveCtrl.activeQuestion].optionA}}</label>
            </li>
            <li>
                <label>
                    <input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===2" ng-click="liveCtrl.answers(liveCtrl.activeQuestion,2)" name="answerGroup" value="1" >&nbsp;{{liveCtrl.questions[liveCtrl.activeQuestion].optionB}}</label>
            </li>
            <li>
                <label>
                    <input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===3"  ng-click="liveCtrl.answers(liveCtrl.activeQuestion,3)" name="answerGroup" value="2" >&nbsp; {{liveCtrl.questions[liveCtrl.activeQuestion].optionC}}</label>
            </li>
            <li>
                <label>
                    <input data-id="{{liveCtrl.activeQuestion}}" type="radio" ng-checked="liveCtrl.useranswers[liveCtrl.activeQuestion].q===4"  ng-click="liveCtrl.answers(liveCtrl.activeQuestion,4)" name="answerGroup" value="3" >&nbsp; {{liveCtrl.questions[liveCtrl.activeQuestion].optionD}}</label>
            </li>
        </ul>
        <div class="questionsRow">
                <button  ng-disabled="liveCtrl.questions.length==liveCtrl.activeQuestion+1" class="subques btn btn-lg btn-secondary"  ng-click="liveCtrl.nextQuestion()">Save & Next</button>
                <button  ng-click="liveCtrl.prevQuestion()" ng-disabled="liveCtrl.activeQuestion == 0" class="subques btn btn-lg btn-secondary" >Previous</button>
        </div>             
    </div>

//問題托盤

 <div class="question-pallete">
    <div  id="{{$index}}"  ng-repeat="question in liveCtrl.questions" class="square">
       <a ng-click="liveCtrl.gotoQues($index)">
          {{$index + 1}}
        </a>
</div>

// jquery為框賦予顏色

<script type="text/javascript">
    $(document).on('click',"input[name='answerGroup']",function(){
        var qid=$(this).data('id');
        console.log(qid);
        $('#'+qid).addClass('box-color');
    });

</script>

控制器功能

this.nextQuestion=()=>{
    live.activeQuestion++;
    //console.log(live.activeQuestion);
};
this.prevQuestion=()=>{
    live.activeQuestion--;
    //console.log(live.activeQuestion);
};
this.gotoQues=(qno)=>{
    live.activeQuestion=qno;
}
this.answers=(qid,option)=>{
    //console.log(qid);
    live.useranswers[qid]={
        q:option

};

當我嘗試在jquery部分中控制qid時，它將在下一個問題中為相同選項輸出相同的qid，但對於其他選項則不是這樣。我認為html中的“ data-id”不會針對這種情況進行更新。抱歉，如果我無法正確解釋。

Answer 1

我發現您的實施存在2個問題。

1. 在您的任何輸入字段中都看不到ng-model 。

2. 為什么不使用ng-class而不是使用jquery獲取ID和添加類？

    <label ng-class="val==0 ? 'highlight':''"> <input type="Radio" ng-model="val" ng-value="0">Option A</label> 

這是jsfiddle鏈接