Angular 单选按钮 ngmodel 不起作用

Question

我想知道为什么下面的单选按钮代码不起作用。我无法 select 单选按钮中的任何选项。单击任何选项后它就会冻结。我能够 select 并且在删除 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'"

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

Answer 2

I cannot select any option from the radio buttons. It froze once I click any of the option

我认为那是因为你在中继器内部进行了函数调用：

<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>

Angular 单选按钮 ngmodel 不起作用

Angular radion button ng-model does not work

javascript

angularjs

angularjs-ng-model