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

coder 2025-03-24 原文

我正在尝试从存储的 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/

javascript AngularJS 34 lt gt json

有关javascript - 在 AngularJS 中从 JSON 生成 HTML 代码的更多相关文章

ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？最佳答案这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2
在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中，它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has
ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2
在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',
ruby - 如何使用 Ruby aws/s3 Gem 生成安全 URL 以从 s3 下载文件 - 2
我正在编写一个小脚本来定位aws存储桶中的特定文件，并创建一个临时验证的url以发送给同事。(理想情况下，这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针，它似乎不符合这个标准，但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby-on-rails - 浏览 Ruby 源代码 - 2
我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru
ruby - 模块嵌套代码风格偏好 - 2
我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。最佳答案这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的

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

有关javascript - 在 AngularJS 中从 JSON 生成 HTML 代码的更多相关文章

随机推荐