表单提交不会更新绑定到单选按钮的模型

Form submit doesn't update model bound to radiobutton

本文关键字：单选按钮 模型 绑定 更新 表单提交      更新时间：2023-09-26

这是我的HTML：

<form role="form" ng-submit="submit()">
    <div class="form-group">
        <div class="radio" ng-repeat="answerswer in answers">
            <label>
                <input type="radio" name="answerswer" ng-model="submittedAnswer" value="{{$index}}" /> {{ answer }}
              </label>
         </div>
     </div>
     <div class="form-group">
         <button type="submit" class="btn btn-primary">Далее</button>
      </div>
</form>

在角度控制器中，我有以下代码：

$scope.submittedAnswer = 0;
$scope.submit = function () {
    answers.push($scope.submittedAnswer);
    console.log($scope.submittedAnswer);
}

提交时，我总是0.似乎问题只与单选按钮有关。我尝试将模型绑定到简单的文本输入，一切正常。有什么建议吗？顺便说一句，有没有办法避免初始化模型（我不希望最初检查任何单选按钮）？

您必须在 ng-repeat 模型中使用 $parent 来绑定模型。

var myapp = angular.module('myApp',[]);
myapp.controller('myController', function($scope){
  $scope.answers = ['One','Two','Three'];
  
  $scope.submit = function(){
    console.log($scope.submittedAnswer);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
<form role="form" ng-submit="submit()" ng-init="submittedAnswer = 0">
                <div class="form-group">
                    <div class="radio" ng-repeat="answerswer in answers">
                        <label>
                            <input type="radio" name="answerswer" ng-model="$parent.submittedAnswer" value="{{$index}}" /> {{ answer }}
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Далее</button>
                </div>
            </form>
    </div>
  </div>

这是您需要了解原因的确切读数。 https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance

相关文章：