AngularJS jsonからラジオボタンとデータを表示する方法

Question

jsonデータを正しく表示できません。

• どのように私は私のJSONファイル（plunker demo）からのラジオボタンを表示することができますか？

• また、私はと書いてください。を検証してください。

HTML：

<my-form ng-app="CreateApp" ng-controller="mainController"> 

    <form ng-submit="submitForm()" novalidate> 

     <fieldset> 
      <div ng-repeat="field in result.fields"> 
       <label for="{{field.type}}">{{field.label}}</label> 
       <input 
        ng-required="{{field.required}}" 
        value="{{options.value}}" 
        type="{{field.type}}" > 

       <form-error ng-show="{{field.errorMessages.required}}"></form-error> 
       <form-error ng-show="{{field.errorMessages.invalid}}"></form-error> 
      </div> 


     </fieldset> 

     <button type="button" ng-click="onValidate(); return false;"> Validate</button> 
     <button type="submit" ng-disabled="userForm.$invalid"> Submit </button> 
    </form> 


</my-form> 

Answer 1

は、コントローラ上の値を開始最初

 $scope.richestClub = {}; 

     $http.get('form.json').success(function(response) { 
     $scope.result = response; 
     var fields = response.fields; 
     $scope.richestClub.val = fields.answer.options[0].value; 
     console.log($scope.richestClub); 
     console.log($scope.fields); 
     }); 

HTML：

<form ng-submit="submitForm()" novalidate> 
      <fieldset> 
      <div ng-repeat="field in result.fields"> 
       <label for="{{field.type}}">{{field.label}}</label> 
       <input ng-if="field.type != 'radio'" ng-required="{{field.required}}" value="{{options.value}}" type="{{field.type}}"> 
       <div ng-if="field.type == 'radio'"> 
       <div ng-repeat="option in field.options"> 
        <input type="{{field.type}}" ng-model="richestClub.val" value="{{option.value}}">{{option.label}}</br> 
       </div> 

       </div> 



       <form-error ng-show="{{field.errorMessages.required}}"></form-error> 
       <form-error ng-show="{{field.errorMessages.invalid}}"></form-error> 
      </div> 
      </fieldset> 

      <button type="button" ng-click="onValidate(); return false;"> Validate</button> 
      <button type="submit" ng-disabled="userForm.$invalid"> Submit </button> 
     </form> 

Answer 2

ここでは、ラジオのオプションを反復できる方法です。私は@charlietflに同意してください。angular-formlyのようなAngularフォームライブラリを使うべきです。

<fieldset> 
    <div ng-repeat="field in result.fields"> 
    <div ng-if="field.type === 'radio'"> 
     <span>{{field.label}}</span> 
     <div ng-repeat="option in field.options"> 
      <label for="{{option.label}}">{{option.label}}</label> 
      <input ng-required="{{field.required}}" 
       value="{{options.value}}" 
       id="{{options.label}}" 
       type="{{field.type}}" > 
     </div> 
    </div> 
    <div ng-if="field.type !== 'radio'"> 
     <label for="{{field.type}}">{{field.label}}</label> 
     <input ng-required="{{field.required}}" 
      value="{{options.value}}" 
      type="{{field.type}}" > 
    </div> 
    <form-error ng-show="{{field.errorMessages.required}}"></form-error> 
    <form-error ng-show="{{field.errorMessages.invalid}}"></form-error> 
    </div> 
</fieldset>