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

Posted 2023-02-22

【中文标题】Angular - 无法使用 ng-submit 获取选定的 ng-repeated 单选按钮

【英文标题】：Angular - unable to get selected ng-repeated radio button using ng-submit

【发布时间】：2015-08-19 01:00:49

【问题描述】：

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

控制器只是将一系列选项附加到范围。

标记只是在表单中创建一堆带有 ng-repeat 的单选按钮。它使用 ng-submit 来捕获提交事件。点击下方的“Run code sn-p”查看问题。

 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>

【问题讨论】：

看看这个***.com/questions/16970248/…

好的，谢谢@DmitriAlgazin - 但 pankajparkar 有答案。

【参考方案1】：

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

原因

ng-repeat 每次都会创建一个新的子作用域，因为您在 ng-repeat 中声明新的ng-model 将被添加到 ng-repeat 作用域（子）中，这个子作用域是由 @ 在每次迭代时创建的987654329@。由于您要创建一个作用域变量到父作用域，所以您需要使用将指向父作用域的$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。您只需在控制器中定义一个范围变量，例如 $scope.selected = option: '' ，然后在 html 上使用它时，您可以直接将其引用为 selected.option，而无需使用 $parent 作为父范围引用。

Demo Fiddle

【讨论】：

@Donal 是的，我正在更新我的答案

好的，谢谢 - 不幸的是我只能投票一次 - 但我相信其他人会。

好的，谢谢。我在这里更新了第二个小提琴：jsfiddle.net/4hkw8h43/5

@Donal 感谢第二把小提琴..我没有时间去做..快乐编码:)