Javascript ng签入单选按钮

我正在制作一个测验应用程序。要显示测验的进度，有一个由小方框组成的问题托盘，当用户单击任何单选按钮时，该托盘将变为黄色，以显示用户已尝试该问题。同时还有一个按钮可移到上一个问题。要显示用户的初始答案，我使用了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>

---

当我试图在jquery部分中控制台qid时，它会为下一个问题中的同一个选项输出相同的qid，但其他选项的情况并非如此。我认为html中的“数据id”不会针对该情况进行更新。如果我无法正确解释，请原谅。

我发现您的实现存在两个问题

我没有在您的任何输入字段中看到

ng model

为什么不使用

ng class

而不是使用jquery来获取id和添加类

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

方案A

这是你的电话号码

<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

};

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