javascript - 在 angularJS 中显示 JSON 中选定的单选按钮

Question

我希望根据给定的 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 数组中的元素数量显示。以及基于自动选择值的单选按钮的值。如果autoselect值与options的任何值匹配，则相应的选项单选按钮将为true，其余为false。

如果 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

提前致谢..

Answer 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