Display selected radio button from JSON in angularJS

Question

I want the radio button to be selected depending on the given JSON format.

{
    "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
  }

Radio button should display on the basis of number of element in options array. And the value of radio button based on autoselect value. If autoselect value match with any value of options then corresponding option radio button will be true and remaining will false.

And if JSON object does not contain autoselect value then none of the radio buttons should be selected initially.

HTML code

<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];
        });

when autoselect values is not there that time my code is not working.

Kindly help me in particular scenario. code is here: plunker

Thanks in advance..

Answer 1

You messed the entire code, use the below code

   <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