javascript - Generer HTML-kode fra JSON i AngularJS

Jeg forsøger at generere HTML-kode dynamisk fra en gemt JSON-fil. JSON-filformatet:

{
  "fields": [
    {
        "name": "service type",
        "type": "text|radio|checkbox|date",
        "placeholder": "Service Type",
        "value": "",
        "checked": "true"
    },
     {
        "name": "service type",
        "type": "text|radio|checkbox|date",
        "placeholder": "Service Type"
     }
  ]
}

Dog ændrer typen af DOM-elementet sig i henhold til JSON-filen. For eksempel, hvis type: text, så skal dette genereres:

 <input type="text" name="service type" value="">

Jeg bruger AngularJS. Hvordan kan jeg implementere dette?

Svar #1

Du kan bruge angularjs-dynamic-form eller selv opsætte en brugerdefineret skabelon.

For eksempel:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.fields = [{
    "id": 1,
    "name": "service type text",
    "type": "text",
    "placeholder": "Service Type",
    "value": ""
  }, {
    "id": 2,
    "name": "service type radio",
    "type": "radio",
    "choices": [{
      'id': 1,
      'selected': true,
      'name': "Choice 1"
    }, {
      'id': 2,
      'selected': false,
      'name': "Choice 2"
    }]
  }, {
    "id": 3,
    "name": "service type checkbox",
    "type": "checkbox",
    "choices": [{
      'id': 1,
      'selected': true,
      'name': "Choice 1"
    }, {
      'id': 2,
      'selected': false,
      'name': "Choice 2"
    }, {
      'id': 3,
      'selected': true,
      'name': "Choice 3"
    }]
  }];

  $scope.updateRadioChoices = function(field, choice) {
    $.each(field.choices, function(i, val) {
      if (val.id != choice.id) val.selected = false;
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div ng-repeat="field in fields">
      <div ng-switch="field.type">
        <div ng-switch-when="text">
          <h5>Text field</h5>
          <hr/>
          <!-- code to render an input field block -->
          <input id="{{ field.id }}" type="text" class="form-control" ng-model="field.value" placeholder="{{ field.placeholder }}" />
        </div>
        <div ng-switch-when="radio">
          <h5>Radio field</h5>
          <hr/>
          <!-- code to render a radio block -->
          <div ng-repeat="choice in field.choices">
            <input name="single-{{ field.id }}" type="radio" id="single-{{ choice.id }}" data-ng-model="choice.selected" data-ng-value="true" ng-change='updateRadioChoices(field, choice)' />
            <label for="single-{{ choice.id }}">{{ choice.name }}</label>
          </div>
        </div>
        <div ng-switch-when="checkbox">
          <h5>Checkbox field</h5>
          <hr/>
          <!-- code to render a checkbox block -->
          <div ng-repeat="choice in field.choices">
            <label for="multiple-{{ choice.id }}">
              <input type="checkbox" ng-model="choice.selected" ng-value="choice.id" name="multiple-{{field.id}}" id="multiple-{{ choice.id }}" />{{ choice.name }}</label>
          </div>
        </div>
        <!-- FALLBACK -->
        <div ng-switch-default>Error. Invalid HTML element type.</div>
      </div>
    </div>
    <h4>Fields - output</h4>
    <hr/>
    {{fields}}
  </div>
</body>

Svar #2

Hvis du bare prøver at oprette formularer, tillader Angular Formly dig at gengive skabeloner fra json.