javascript - Angular - 无法使用 ng-submit 获取选定的 ng-repeated 单选按钮

Question

我可能在这里遗漏了一些非常简单的东西 - 但如果我使用 ng-repeat 创建一堆单选按钮 - 我无法使用 ng-submit 获得选定的按钮。

Controller 只是将一组选项附加到范围。

标记只是在表单中创建了一堆带有 ng-repeat 的单选按钮。它使用 ng-submit 来捕获提交事件。点击下面的“运行代码片段”以查看问题。

 angular.module('myApp', [])
    .controller('myController', ['$scope', function($scope) {

      $scope.selectedoption = "";
      $scope.submitCalled = "";

      $scope.options=[];
      $scope.options[0]={id: "option1", name: "option 1"}
      $scope.options[1]={id: "option2", name: "option 2"}
      $scope.options[2]={id: "option3", name: "option 3"}
      $scope.options[3]={id: "option4", name: "option 4"}

      $scope.submitForm = function() {       
        console.log($scope.selectedoption);              
        $scope.submitCalled = "submit called " + $scope.selectedoption;
      };
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">

<form ng-submit="submitForm()" ng-controller="myController">    
    <div ng-repeat="option in options">
      <input type="radio" name="option" ng-value="option.id" ng-model="selectedoption">
      <label for="radio">{{option.name}}</label>
    </div>     

    <h2>{{selectedoption}}</h2>
    <h2>{{submitCalled}}</h2>

    <input type="submit" id="submit" value="Submit" />  
</form>
</div>

Answer 1

你 ng-repeat div 应该使用 ng-model="$parent.selectedoption"

原因

ng-repeat 每次都会创建一个新的子作用域，因为您在 ng-repeat 中声明新的 ng-model 将被添加到 ng-repeat 作用域中( child)，这个子作用域在每次迭代时由 ng-repeat 创建。由于您要为父作用域创建一个作用域变量，因此您需要使用指向父作用域的 $parent 变量。

<div ng-repeat="option in options">
  <input type="radio" name="option" ng-value="option.id" ng-model="$parent.selectedoption">
  <label for="radio">{{option.name}}</label>
</div>

Demo Fiddle

更新

避免这种$parent 注释的其他好方法是使用对象注释，这将遵循scope prototypal inheritance。 .您唯一需要做的就是在 Controller 中定义一个范围变量，例如 $scope.selected = { option: '' } 然后在 html 上使用它时，您可以将其称为 selected.option 直接不需要使用 $parent 作为父作用域引用。

Demo Fiddle