Angular ng-repeat 与 jquery 单选按钮混合并使用选中的属性选择默认值答案

【问题标题】：Angular ng-repeat mixed with jquery radio button and select default value using checked attributeAngular ng-repeat 与 jquery 单选按钮混合并使用选中的属性选择默认值
【发布时间】：2023-03-26 22:01:01
【问题描述】：

我创建了一个代码笔来描述我的问题：

http://codepen.io/kk20994/pen/ygvQQO

HTML

<div ng-app="app" ng-controller="MainController" class="container">
  <form class="form row">
    <div class="form-group" ng-repeat="radio in radioGroups">
      <label for="{{radio.id}}">{{radio.label}}</label>

      <div class="radio">
        <label>
    <input type="radio" name="optionsRadios_{{radio.id}}" id="optionsRadios_default" value="" checked>
    Not Sure
  </label>
      </div>
      <div class="radio" ng-repeat="value in radio.values">
        <label>
    <input type="radio" name="optionsRadios_{{radio.id}}" id="optionsRadios_{{radio.id}}_{{value.key}}" value="{{value.key}}">
    {{value.label}}
  </label>
      </div>
    </div>
  </form>
</div>

Javascript：

angular.module("app", [])
.controller('MainController', function($scope){
  $scope.radioGroups = [{
    id: 1,
    label: "Is this fissible in rural area?",
    values: [{
      key: "true",
      label: "True"
    },{
      key: "false",
      label: "False"
    }]
  },{
    id: 2,
    label: "Is this for all students of district?",
    values: [{
      key: "true",
      label: "True"
    },{
      key: "false",
      label: "False"
    }]
  }];
});

输出：

因此，即使两个单选按钮组具有不同的 id 和名称，它仍然不起作用。即使我检查 DOM，第一个单选按钮的属性“已检查”也是错误的。

请注意，我无法更改 DOM，但我想在渲染 DOM 后检查所有没有 jquery 的单选按钮的默认值。

【问题讨论】：

标签： jquery angularjs ng-repeat radio radio-group

【解决方案1】：

要选择angular js 中的单选按钮，您需要使用ng-repeat 中的ng-model 属性。我在$scope.radioGroups 中放置了一个附加字段value 来设置单选按钮的值。

也不需要使用value="{{value.key}}"，而是可以使用ng-value="value.key"

对于第一个带有不确定选项的单选按钮，您不能使用ng-value，因为该值不包含任何表达式。可以直接初始化为value=""

这是附加的工作代码。

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
        angular.module("app", [])
            .controller('MainController', function ($scope) {
                $scope.radioGroups = [
                    {
                        id: 1,
                        label: "Is this fissible in rural area?",
                        values: [{ key: "true", label: "True"}, 
                                 { key: "false", label: "False"}
                                ],
                        value: ""
                    }, 
                    {
                        id: 2,
                        label: "Is this for all students of district?",
                        values: [{ key: "true", label: "True"},
                                 { key: "false", label: "False" }
                                ],
                        value: ""
                    }];
            });
    </script>
</head>

<body>

    <div ng-app="app" ng-controller="MainController" class="container">
        <form class="form row">
            <div class="form-group" ng-repeat="radio in radioGroups">
                <label for="{{radio.id}}">{{radio.label}}</label>

                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios_{{radio.id}}" ng-model="radio.value" id="optionsRadios_default" value=""> Not Sure
                    </label>
                </div>
                <div class="radio" ng-repeat="value in radio.values">
                    <label>
                        <input type="radio" name="optionsRadios_{{radio.id}}" ng-model="radio.value" id="optionsRadios_{{radio.id}}_{{value.key}}" ng-value="value.key"> {{value.label}}
                    </label>
                </div>
            </div>
        </form>
    </div>

</body>

</html>

由于为范围变量中的所有对象设置了value: ""，默认情况下将选择“不确定”。您可以根据需要更改其值来更改选择。

【讨论】：