单选按钮值未正确呈现

Question

我对单选按钮有疑问。我正在从 JSON 中获取标签、组件等所有值并将其呈现在视图中。

示例：我从 JSON 中获得了组件单选按钮的两个值，我正在将其呈现在视图中，但问题是当我选择第一个单选按钮时，其他单选按钮未选中。 注意：这两个在不同的 div 中。

  {
    "autoselect": [
      "nihil est velit"
    ], 
    "component": "radio", 
    "description": "distinctio accusamus cum quod veniam voluptatibus dolor", 
    "editable": false, 
    "label": "qui excepturi laborum", 
    "options": [
      "nihil est velit", 
      "ad aliquid id", 
      "irure", 
      "veniam voluptas", 
      "velit ea consectetur"
    ], 
    "required": true
  }, 
  {
    "autoselect": [
      "qui soluta"
    ], 
    "component": "radio", 
    "description": "est rerum dolor quisquam", 
    "editable": false, 
    "label": "deserunt quia", 
    "options": [
      "qui soluta", 
      "aperiam ut", 
      "et nostrud"
    ], 
    "required": true
  }, 
  {
    "autoselect": [
      "occaecati impedit proident"
    ], 
    "component": "radio", 
    "description": "id cumque totam sapiente reprehenderit", 
    "editable": false, 
    "label": "sit ut", 
    "options": [
      "corrupti", 
      "quidem", 
      "occaecati impedit proident"
    ], 
    "required": true
  }

HTML 代码

<form name="myForm" role="form" novalidate class="form-horizontal" ng-hide="formMain">
      <div class="mainBody" ng-repeat="tag in renderTags.form_fields track by $index">
        <ng-form name="tag.form_name" id="tag.form_id">
          <div ng-switch on="tag.component" class="row">
            <div ng-switch-when="radio" class="form-group">
              <label class="control-label col-xs-3"><b>{{tag.label}}:</b></label>
              <div class="col-xs-2">
                <div class="form-control" ng-repeat="option in tag.options" ng-disabled="!tag.editable" ng-required="tag.required" style="margin-right:10px !important;">
                  <span ng-if="tag.autoselect!==null">
                                            <span ng-if="tag.autoselect[0] === option">
                                                <input type="radio" checked ng-value="option" name="$index" ng-click="clicked(option,tag)">{{option}}
                                            </span>
                  <span ng-if="tag.autoselect[0] !== option">
                                                <input name="$index" type="radio" ng-value="option">{{option}}
                                            </span>
                  </span>
                </div>
              </div>
            </div>
            <br/>
            <div ng-switch-default>

            </div>
          </div>
        </ng-form>
      </div>
    </form>

JS代码

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

app.controller('MainCtrl', function($scope, $http) {
  $scope.getForm = function() {
    var formdata = $http({
        method: 'GET',
        url: 'data.json'
      })
      .then(function(response) {
        $scope.renderTags = response.data.data;
      }, function(reason) {
      });
  };

  $scope.clicked = function(option, tag) {
    var index = tag.autoselect.indexOf(option);
    if (index > -1) {
      tag.autoselect.splice(index, 1);
    } else {
      tag.autoselect.push(option);

    }
  }
});

您能帮我解决这个问题吗？ Link to Plunkr

尝试选择其中一个复选框，其他的值会消失。 提前致谢

Answer 1

name 属性用于对单选按钮进行分组。将name属性设置为{{tag.label}}，这样一个标签下的所有单选按钮都会被分组

还可以使用ng-checked 和表达式ng-checked="tag.autoselect[0] === option" 来检查默认值

更改您的HTML <span>

来自

<span ng-if="tag.autoselect!==null">
  <span ng-if="tag.autoselect[0] === option">
      <input type="radio" checked ng-value="option" name="$index" ng-click="clicked(option,tag)">{{option}}
   </span>
   <span ng-if="tag.autoselect[0] !== option">
      <input name="$index" type="radio" ng-value="option">{{option}}
   </span>
</span>

到

<span ng-if="tag.autoselect!==null">
  <span>
    <input type="radio" ng-checked="tag.autoselect[0] === option" name="{{tag.label}}" ng-click="clicked(option,tag)" />{{option}}
  </span>
</span>

这里是UPDATED PLUNKER