AngularJS Form如何显示JSON中的单选按钮和数据

Question

我无法正确显示json数据。

• 如何显示json文件中的单选按钮（ plunker演示 ）？

• Aslo我想在提交时验证表格。

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

这是您如何遍历单选选项的方法。 我同意@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>

Answer 2

首先在控制器上初始化一个值

        $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>