个人中心
gpt4 book ai didi

javascript - 在 AngularJS 中从 JSON 生成 HTML 代码

转载 作者：数据小太阳 更新时间：2023-10-29 06:11:00 25 4
gpt4 key购买 nike

我正在尝试从存储的 JSON 文件动态生成 HTML 代码。 JSON文件格式:

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

然而，DOM 元素的类型会根据 JSON 文件而变化。例如，如果类型:文本，则必须生成:

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

我正在使用 AngularJS。我该如何实现？

最佳答案

您可以使用 angularjs-dynamic-form或自己设置自定义模板。

例如:

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>

关于javascript - 在 AngularJS 中从 JSON 生成 HTML 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31627648/

25 4 0
文章推荐： javascript - 在 bookshelf.js 中手动设置时间戳值
文章推荐： java - 如何使用 Java 和类似 Elasticsearch 的查询将 Json 存储在 Redis 中
文章推荐： redis - 有没有办法使用 Docker secrets 从/run/secrets/redis-pass 读取并设置 redis --requirepass 标志？
文章推荐： java - 在 Redis 中存储大型复杂 Java 类对象的最佳方式？
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com