在angularJS中显示从JSON中选择的单选按钮答案

【问题标题】：Display selected radio button from JSON in angularJS在angularJS中显示从JSON中选择的单选按钮
【发布时间】：2017-08-09 23:07:13
【问题描述】：

我希望根据给定的 JSON 格式选择单选按钮。

{
    "autoselect": [
      "fugiat"
    ], 
    "component": "radio", 
    "description": "necessitatibus accusantium aliquid iste non", 
    "editable": false, 
    "label": "in sunt", 
    "options": [
      "fugiat", 
      "commodo hic", 
      "exercitationem"
    ], 
    "required": true
  },
  {
    "component": "radio", 
    "description": "necessitatibus accusantium aliquid iste non", 
    "editable": false, 
    "label": "in sunt", 

    "options": [
      "fugiat", 
      "commodo hic", 
      "exercitationem"
    ], 
    "required": true
  }

单选按钮应根据options 数组中的元素数显示。并且单选按钮的值基于autoselectvalue。如果autoselectvalue 与options 的任何值匹配，则相应的选项单选按钮将为真，其余为假。

如果 JSON 对象不包含 autoselect 值，则最初不应选择任何单选按钮。

HTML 代码

<div data-ng-if="formData.component=='radio'" class="form-group">
                    <label class="col-sm-2 control-label">{{formData.label}} : </label><br>
                    <div class="col-sm-8">
                            <div class="row"  data-ng-repeat="option in formData.options"
                                 data-ng-disabled="{{!formData.editable}}"
                                 data-ng-required="{{formData.required}}">
                                <label class="col-sm-4">{{option}} : </label>
                                 <div data-ng-if="formData.hasOwnProperty('autoselect')" data-ng-repeat="autoselect in formData.autoselect">
                                    <div data-ng-if="option === autoselect"> 
                                        <input class="col-sm-1" type="{{formData.component}}" data-ng-model="radioAction.checked">
                                    </div>
                                    <div data-ng-if="option !== autoselect">
                                        <input class="col-sm-1" type="{{formData.component}}" data-ng-model="!radioAction.checked">
                                    </div> 
                                </div>
                                <div data-ng-if="!formData.hasOwnProperty('autoselect')">
                                    <input class="col-sm-1" type="{{formData.component}}" data-ng-model="radioAction">
                                </div>
                             </div> 
                    </div>
                </div>

Contoller.js

$http.get("data.json")
        .then(function(response){ 
            $scope.formDatas = response.data.data; 
            console.log($scope.formDatas);
            //$scope.autoSelect = $scope.formDatas.form_fields.autoselect[0];
        });

当自动选择值不存在时，我的代码不起作用。

请在特定情况下帮助我。 code is here: plunker

提前谢谢..

【问题讨论】：

如何在一个组中选择多个单选按钮
@Aravind 只应选择一个单选按钮，自动选择数组中存在哪个值
你能创建一个工作的 plunker 吗？？
好的，给我一些时间
np 慢慢来。

标签： javascript angularjs

【解决方案1】：

你弄乱了整个代码，使用下面的代码

   <form name="myForm" class="form-horizontal" role="form" data-ng-submit="submitForm()">
    <div data-ng-repeat="formData in formDatas.form_fields">
      <data-ng-form name="formData.form_name" id="formData.form_id">
        <!-- RADIO FIELDS -->
        <label class="col-sm-2 control-label">{{formData.label}} : </label>
        <div data-ng-if="formData.component=='radio'" class="form-group">
          <br>
          <div class="row" data-ng-repeat="option in formData.options" data-ng-disabled="{{!formData.editable}}" data-ng-required="{{formData.required}}">
            <span ng-if="formData.autoselect!==null">
            <label class="col-sm-4">{{option}} : </label>
            <span ng-if="formData.autoselect[0] === option">
              <input type="radio" checked ng-value="option" name="option" ng-click="clicked(option)">
              </span>
            <span ng-if="formData.autoselect[0] !== option">
              <input name="option" type="radio" ng-value="option">
              </span>
            </span>
          </div>
        </div>
      </data-ng-form>
    </div>
  </form>

LIVE DEMO

【讨论】：