javascript - 使用 NG-repeat 制作带有多个单选按钮的表单 : want to reset the value of all the radio buttons

Question

我遇到了 Angular 的问题；我有多个 Actor ，每个 Actor 都呈现一个单选框表单，其中包含 3 个选项:受害者、肇事者和两者。

相关模板:

        <div class="actor" ng-repeat="activeActor in activeActors">                                                 
          <p class="category">{{activeActor}}</p>
          <form name="radioButtonForm">
            <div class="causerRadioForm">
              <input type="radio" name="causerRadio" value="victum" ng-model="defaultRadioButton" ng-click="setActorCauser(activeActor, 'victum')">
            </div>

            <div class="causerRadioForm">
              <input type="radio" name="causerRadio"  value="causer" ng-model="defaultRadioButton" ng-click="setActorCauser(activeActor, 'causer')">
            </div>

            <div class="causerRadioForm">
              <input type="radio"  name="causerRadio" value="both" ng-model="defaultRadioButton" ng-click="setActorCauser(activeActor, 'both')">
            </div>

          </form>

        </div>

这工作正常，但我有一个按钮，如果我点击它，多个 Actor (称为 fastActors)将被渲染并具有默认值 victum。

问题是，当我选择一个 actor 并将其放入 cause，然后单击 fastActors 时，单选框保持在 causer 而单选按钮应重置为 victum。

相关JS

$scope.toggleFastTraffic = function(actor){
  //erase all actors 
  $scope.actors = [];
  $scope.report.traffic_players = [];
  //default value for radio boxes
  $scope.defaultRadioButton = "victum";


  $scope.SlowTraffic = false;
  $scope.FastTraffic = true;
  $scope.formOptionsExpanded = true;
  $scope.activeActors = [];

  var i = $scope.activeActors.indexOf(actor);
  console.log($scope.activeActors.indexOf(actor));
  if ($scope.counter === -1){

   //do more here
}

基本上，在我按下 toggleFastActor 的那一刻，我希望让所有单选按钮成为 victum。

亲切的问候，

附言我知道我奉命保留那个 victum 错字 :P

这是一个快速的代码笔，它还没有完成，但它确实包含错误:如果你按下汽车并使其成为一个原因，然后切换快速交通，汽车就会在报告中成为受害者(这很好)但是单选按钮不会改变。

P.s codepen还有一些其他的bug，不用关注那些。

http://codepen.io/CMD-Thomas/pen/yNbNaZ?editors=101

Answer 1

发生这种情况是因为 ng-model 值相同。一旦将“defaultRadioButton”的值设置为“causer”，它将仍然是所有人的原因。记住 MVVM 模式