Question

我想知道为什么下面的单选按钮代码不起作用。我无法从单选按钮中选择任何选项。一旦我点击任何选项，它就会冻结。当我删除ng-model时，我能够选择并且不会冻结。

<div class="col-lg-12">
<div ng-repeat="q in getCurrentSectionsQuestion().qs">
    <h2>{{q.q}}</h2>
    <ul ng-if="q.qtype == 'checkbox'">
        <li ng-repeat="option in q.options">
            <input type="{{q.qtype}}" name="{{q.qid}}" ng-value="{{option.selected}}" ng-model="option.selected" ng-change="!option.selected || appendAnswer(q,option.option)"/>
            {{option.option}}
        </li>
    </ul>
    <ul ng-if="q.qtype == 'radio'">
        <li ng-repeat="opt in q.options">
            <input type="{{q.qtype}}" name="{{q.qid}}" ng-value="{{opt}}" ng-model="$parent.q.a">
            {{opt}}
        </li>
    </ul>
    <h3>Your answer : {{q.a.toString()}}</h3>
</div>
</div>

Answer 1

如果值的类型为字符串，那么该值应该在ng-value指令的引号内写入。

示例：

ng-value="'option-1-value'"

如果该值不是string类型，则应检查是否存在任何类型的指令交叉干扰或任何其他代码错误行为。

Answer 2

我无法从单选按钮中选择任何选项。我冻结了一次单击任何选项

我认为这是因为你在转发器内部正在进行函数调用：

<div ng-repeat="q in getCurrentSectionsQuestion().qs">

这不是一个好习惯，因为getCurrentSectionsQuestion()函数会因$digest周期而多次调用，而您的应用程序会出错。

我建议您按如下方式更新代码：

控制器

// Start code of your controller
activate();

function activate() {
  $scope.qs = vm.getCurrentSectionsQuestion().qs;
}

function getCurrentSectionsQuestion() {
  return {
    qs: [
      {
        qid: 'id',
        qtype: 'checkbox',
        options: [
          {
            selected: true,
            option: 'option A'
          }
        ]
      }
    ]
  };
}

标记

  <div class="col-lg-12">
    <div ng-repeat="q in qs">
      <h2>{{q.q}}</h2>
      <ul ng-if="q.qtype == 'checkbox'">
        <li ng-repeat="option in q.options">
          <input type="{{q.qtype}}" name="{{q.qid}}" ng-value="{{option.selected}}" ng-model="option.selected"
                 ng-change="!option.selected || main.appendAnswer(q,option.option)"/>
          {{option.option}}
        </li>
      </ul>
      <ul ng-if="q.qtype == 'radio'">
        <li ng-repeat="opt in q.options">
          <input type="{{q.qtype}}" name="{{q.qid}}" ng-value="{{opt}}" ng-model="$parent.q.a">
          {{opt}}
        </li>
      </ul>
      <h3>Your answer : {{q.a.toString()}}</h3>
    </div>
  </div>

角度辐射按钮ng-model不起作用

2 个答案: