ラジオボタンの値が正しく表示されない

Question

ラジオボタンに問題があります。私はJSONからlabel、componentなどのすべての値を取り出し、それを表示しています。

例：私は、JSONからコンポーネントラジオボタンの2つの値を持って、私は、ビューでそれをレンダリングしていますが、問題は、私が最初のラジオボタンを選択すると、他の無線値が選択されていない取得することです。 注：これらはいずれも異なる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

は、チェックボックスのいずれかを選択してみてください、他の1の値が消灯します。 ありがとうございます。

Answer 1

name属性は、ラジオボタンをグループ化するために使用されます。設定しname属性を{{tag.label}}に1つのラベルの下のすべてのラジオボタンが

を変更し、デフォルト値を確認するためにも表現ng-checked="tag.autoselect[0] === option"でng-checkedを使用

をグループ化されますように、あなたの 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> 

0に

ここで

はUPDATED PLUNKER