Question

我想在这里做的是，我在表单中有一个ng-repeat，如果我点击那些输入按钮中的任何一个对应所有按钮都被禁用

<div ng-repeat="question in sinSurCtrl.singleSurvey" ng-show="!$first">
        <hr>
            <p>Q. {{question.questionText}}</p>
            <form >
                <div ng-repeat=" option in question.questionOptions track by $index">   
                    <label>
                        <input name="options" type="radio" value="$index" ng-click="sinSurCtrl.questionId=question.questionId; sinSurCtrl.answer=$index+1; sinSurCtrl.createAnswer()" onclick="this.disabled = true">
                        <span> {{option}} {{$index+1}} {{question.questionId}} </span>
                    </label>
                </div>
            </form>
        </div>

这是观点 -

正如你所看到的，如果我选择其中任何一个选项，它会被禁用，但我想要做的是，如果我尝试任何人选项，那么对应于同一问题的选项将被禁用。例如- 在第三季度。这是一个更好的演说家？如果我选择选项（a）然后它被选中，之后自动机器人选项（a）和（b）被禁用。

注意 - 请尝试将解决方案完全保留在angularjs中，或者如果你想使用经济实惠的javascript，那么请避免使用像jQuery这样的外部库（我知道没有人在他的意义上会处理使用jQuery和角度的麻烦但是对于例如，我已将其名称包括在内）

Answer 1

建议的解决方案有一些建议的重构......

首先更改ng-click指令以指向onOptionButtonClicked上的新sinSurCtrl函数，该函数接收question和index这两个参数（需要它）开展它的工作）：

<div ng-repeat="question in sinSurCtrl.singleSurvey" ng-show="!$first">
  <hr>
  <p>Q. {{question.questionText}}</p>
  <form>
    <div ng-repeat="option in question.questionOptions track by $index">   
      <label>
        <input 
          name="options" 
          type="radio" 
          value="$index"
          ng-click="onOptionButtonClicked(question, $index)"
          ng-disabled="question.disabled">
        <span> {{option}} {{$index+1}} {{question.questionId}} </span>
      </label>
    </div>
  </form>
</div>

另请注意新添加的ng-disabled="question.disabled"指令。这是启用/禁用问题控件的机制的一部分。

现在将变量赋值移动到新的onOptionButtonClicked函数。对于变量赋值，控制器通常是一个更好的位置（而不是视图），特别是如果它们在同一个指令中有多个。

sinSurCtrl.onOptionButtonClicked = onOptionButtonClicked;

function onOptionButtonClicked(question, index){
  sinSurCtrl.questionId=question.questionId; 
  sinSurCtrl.answer=index; 
  sinSurCtrl.createAnswer();
  question.disabled = true; // <--- This is what disables the option buttons
}

这是已回答的question对象将其disabled属性设置为true的位置。这与前面提到的ng-disabled指令相结合，禁用了选项按钮。

Answer 2

在你的控制器上，创建一个函数，检查给定的questionId是否已被回答，如果有，则返回真值。在输入标记中的ng-disabled中调用该函数：

<input type="radio" ng-disabled="sinSurCtrl.questionHasAnswer(question.questionId)" ... />

如果在angularjs ng-repeat中单击其中任何一个按钮，则禁用所有单选按钮

2 个答案: