单击列表中的每个单选按钮后，ng-change不会触发

I am creating a small application for my college project, I have a scenario where when the user clicks on a radio button an event should be fired.

我正在为我的大学项目创建一个小应用程序,我有一个场景,当用户点击一个单选按钮时,应该触发一个事件。

My Angular code block:

我的Angular代码块:

<div ng-repeat="q in questionList " ng-if="ExamOver == false">
      <h2>{{count+1}} .{{q.questionText}}</h2>
      <ul>
          <li ng-repeat="d in q.Choices">
              <input type="radio" name="isCorrect" ng-model="correctAnswer.isworking" ng-change="getDetails($index,d,correctAnswer.isCorrect);" value="Yes" />
              {{d.choiceText}}
          </li>
     </ul>
</div>

In my controller, I have this code:

在我的控制器中,我有这个代码:

$scope.correctAnswer = {isCorrect : false};

$scope.getDetails = function (index, choiceList, isCorrect) {    
    /* some logic... */
}

The events are firing only once per button, I am trying to work around this for past few hours without any progress, can someone please guide me what I am doing wrong here?

事件每个按钮只发射一次,我试图解决这个过去几个小时没有任何进展,有人可以指导我在这里做错了吗?

2 个解决方案

#1

ng-change will be fired when the value of the variable you binded (with ng-model) changed. Here, all your radio buttons have the same value="Yes". That's is why ng-change is not triggered. From docs:

当您绑定的变量(使用ng-model)的值发生更改时,将触发ng-change。在这里,所有单选按钮都具有相同的值=“是”。这就是为什么不触发ng-change的原因。来自docs:

Evaluate the given expression when the user changes the input. The expression is evaluated immediately, unlike the JavaScript onchange event which only triggers at the end of a change (usually, when the user leaves the form element or presses the return key).

在用户更改输入时评估给定的表达式。表达式是立即计算的,不像JavaScript onchange事件,它只在更改结束时触发(通常,当用户离开表单元素或按下返回键时)。

The good solution depends of your needs, but where are some ideas:

一个好的解决方案取决于您的需求,但一些想法在哪里:

Solution 1

Set different values for your inputs:

为输入设置不同的值:

<li ng-repeat="d in q.Choices">
     <input type="radio" 
            name="isCorrect" 
            ng-model="correctAnswer.isworking" 
            ng-change="getDetails($index, d, correctAnswer.isCorrect)" 
            ng-value="$index" />
     {{d.choiceText}}
</li>

Solution 2

Fire your function whenever a radio is clicked:

只要点击一个无线电,就可以激活你的功能:

ng-click="getDetails($index, d, correctAnswer.isCorrect)"

#2

ngChange gets triggered if the value of ngModel changes.

如果ngModel的值发生更改,则会触发ngChange。

Your radio buttons all have the same value namely "Yes"

您的单选按钮都具有相同的值,即“是”

<input type="radio" name="isCorrect" ng-model="..." ng-change="..." value="Yes" >