单选按钮未选择的AngularJS问题

Question

我试图在单选按钮上捕捉 ng-change 事件，但问题是只有当我第二次单击同一组中的任何收音机时才会检查它。此外，当我第一次单击单选时，会调用 ng-changed，但如果我再次单击另一个单选按钮或同一个单选按钮，则不会。

<div>
<div ng-repeat="element in questions" ng-class="{'in':$first,'hidden': !$first}">
    <h1>{{element.question}}</h1>
    <div>
        <input type="radio" name="answer" ng-value="A" ng-model="$parent.answer" ng-change="enableSubmit()">{{element.answerA}}</input>
        <input type="radio" name="answer" ng-value="B" ng-model="$parent.answer" ng-change="enableSubmit()">{{element.answerB}}</input>
        <input type="radio" name="answer" ng-value="C" ng-model="$parent.answer" ng-change="enableSubmit()">{{element.answerC}}</input>
    </div>
</div>
<button id="prev" class="hidden" ng-click="prevQuestion()">Anterior</button>
<button id="next" ng-click="nextQuestion()" disabled>Siguiente</button>
</div>

这可能有什么问题？提前致谢。

Answer 1

由于ng-repeat 创建了自己的$scope，正如您在此answer 中看到的那样，您必须最好使用controller-as-syntax 来实现您想要的。

使用您的代码的演示：

DEMO

注意：我不知道您是否将jQuery 用于隐藏/禁用按钮之外的其他功能，但是所有这些事情都可以用 Angular 轻松完成，像这样：

<input type="radio" ng-model="main.answer" value="A" ng-change="enableSubmit()" />

$scope.enableSubmit = function() {
    $('#next').prop('disabled', false);
};

在视图中应该就是这个：

<button ng-disabled="!main.answer" id="next" ng-click="nextQuestion()">Siguiente</button>

希望对你有帮助！