在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值。 如果autoselect值匹配的任何值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];
        });

當自動選擇值不存在時，我的代碼無法正常工作。

請在特定情況下幫助我。 代碼在這里：punker

提前致謝..

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>

現場演示