无法在 AngularJS 中动态获取无线电选择设置的值答案

【问题标题】：Not able to get value of radio select setting dynmically in AngularJS无法在 AngularJS 中动态获取无线电选择设置的值
【发布时间】：2015-08-08 16:37:10
【问题描述】：

以下是我的代码，其中我没有为每个相应的行选择单选选项，让我知道我在这里做错了什么。

我的 Plnkr 代码 - http://plnkr.co/edit/MNLOxKqrlN5ccaUs5gpT?p=preview

虽然我得到了 classes 对象的名称，但没有得到选择。

HTML 代码 -

  <body ng-controller="myCtrl">
    <div class="container-fluid">
       <form name="formValidate" ng-submit="submitForm()" novalidate="" class="form-validate form-horizontal">
          <div class="form-group">
             <label class="col-sm-2 control-label">Name</label>
             <div class="col-sm-6">
                <input type="text" name="name" required="" ng-model="classes.name" class="form-control" />
             </div>
          </div>
          <div class="form-group">
             <table id="datatable1" class="table table-striped table-hover">
                <tr class="gradeA" ng-repeat="cls in reqgrps">
                   <td ng-bind="cls.name"></td>
                   <td><input type="radio" name="groupName[{{$index}}]" ng-model="classes.satisfies"> Choice 1</td>
                   <td><input type="radio" name="groupName[{{$index}}]" ng-model="classes.satisfies"> Choice 2</td>
                   <td><input type="radio" name="groupName[{{$index}}]" ng-model="classes.satisfies"> Choice 3</td>
                </tr>
             </table>
          </div>
          <div class="panel-footer text-center">
             <button type="submit" class="btn btn-info">Submit</button>
          </div>      
       </form>
    </div>

    <div class="result">{{classes}}</div>
  </body>

脚本文件 -

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function($scope){
  $scope.reqgrps = [{name: 'Sub1', roll: 121},{name: 'Sub2', roll: 122}, {name: 'Sub3', roll: 123}];
  $scope.classes = {};
  $scope.result = {};

  $scope.submitForm = function() {
    $scope.result = $scope.classes;
  };

});

------------- 编辑 -------------

预期输出 -

类 obj -

{
    name: "Test Class",
    satisfies: [
        "Sub1": "Choice 1",
        "Sub2": "Choice 3",
        "Sub3": "Choice 2",
        .................
        ..................
        ..................
        ..................
        "Subn": "Choice 2",
    ]
}

【问题讨论】：

我不确定我是否理解你在这里想要做什么......你有一个空对象，你是什么，试图将被选中的单选按钮存储到那个空目的？我真的不认为你可以这样做。
在 ng-model 中使用不需要初始化空对象，如果它不存在，ng-model 将隐式创建 scope 属性
@Claies 我如何捕获为每个后续行选择的单选按钮......让我们说 Sub 1 我为 Sub 2 选择“Choice1”我选择“Choice3”......等等。 .让我知道这是否有意义
这是我所知道的关于单选按钮如何以角度工作的最佳描述：odetocode.com/blogs/scott/archive/2013/06/25/…
@Claies 我可以举个例子吗..或链接开始这个

标签： javascript angularjs html angularjs-scope

【解决方案1】：

您应该为每一行指定不同的 ng-model 属性。（不知道为什么要在 3 个相同的行上指定相同的模型）。理论上你不必这样做，但正如我所说，我不明白你为什么要这样做。

您还应该在单选按钮上添加一个 value 属性：

http://plnkr.co/edit/JN4JuQJH2OvRxoawfDbv?p=preview

来自角度文档：

值字符串
选择表达式时应设置的值。

https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

我还建议您删除控制器中空对象的初始化（如果 ng-model 在范围内找不到属性，它只会为您创建它），我注意到您使用了 ng-绑定，如果您不知道这只是双括号的快捷方式：{{}}

编辑：

如果您的值需要是动态值，您可以使用 ng-value 并在范围上指定一个属性，然后您可以在控制器中设置该属性

【讨论】：

..table(tr) 是动态的...所以我需要动态处理它
动态表格与在单选按钮上添加值属性有什么关系？
“不确定为什么要在 3 个相同的行上指定相同的模型”如果我要附加不同的模型..它将选择 3 个值而不是一个...我想捕获每行的选择..让我们说 =>> Sub 1 我为 Sub 2 选择“Choice1”我选择“Choice3”..等等
如果你为所有这些指定相同的 ng-model，所有按钮都会跳转，因为你将更新每个按钮的值，ng-model 绑定是双向绑定，因此控制器中的更新将是也在视图中更新。

【解决方案2】：

您需要为每个单选按钮设置ng-value，这样Angular 才能选择这些值。您有 3 行相同的行，所以我为它们添加了一些虚拟值以显示正确的输出。

http://plnkr.co/edit/AxUx83xdotniYru6amGU?p=preview

此外，您可以在此处的官方文档中找到使用 Angular 单选按钮的明确示例：

https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

更新：

检查已编辑的 plnkr，希望对您有所帮助！

【讨论】：

我想要这样的东西 - 对于“Sub1”，我选择“Choice1”，对于“Sub2”，我选择“Choice2”，对于“Sub3”，我选择“Choice2”..注意这些行是动态的..我希望它对你有意义
@TechSolvr 您能否发布一个在检查所有单选按钮后希望接收的对象示例？

【解决方案3】：

您需要区分由 ng-repeat 生成的每一行。

您可以通过将 [$index] 添加到每个 ng-model 来做到这一点，如下所示：

<td><input type="radio" ng-model="classes.satisfies[$index]" value="Choice 1"> Choice 1</td>
<td><input type="radio" ng-model="classes.satisfies[$index]" value="Choice 2"> Choice 2</td>
<td><input type="radio" ng-model="classes.satisfies[$index]" value="Choice 3"> Choice 3</td>

正如其他人所提到的，您可以根据需要通过使用 ng-value 设置传递给模型的值来使结果动态化。

生成的对象是这样的：

{"name":"Bill","satisfies":{"0":"Choice 2","1":"Choice 1","2":"Choice 3"}}

See plunker here

【讨论】：

乐于助人...使用 ng-model 和 ng-repeat 总是很有趣和具有挑战性 - $index 可以节省大量时间，您也可以将其用作 {{$index}}如果你不在指令中。