javascript - AngularJS JSON 格式

coder 2025-01-11 原文

我是 AngularJS 的新手，我正在尝试根据表 tr 和 td 值制作格式化的 JSON。

表格 tr 是自动生成的。提交表单后，我尝试生成 json 值。

提交表单后，我需要生成 JSON。

<form>

    <table>
        <!-- Auto generated rows -->
        <tr>
            <td>
            <input type="text" class="form-control" name="tname"  value="">
            </td>
            <td>
            <select ng-model="selection1" class="form-control"  name="ttype" value="">
                <option value="bbb" selected>Test</option>
                <option value="aaa" >Lumpsum</option>
            </select></td>
            <input type="text" class="form-control parsley-success" name="tvalue" >
            </td>
        </tr>
        <tr>
            <td>
            <input type="text" class="form-control" name="tname"  value="">
            </td>
            <td>
            <select ng-model="selection1" class="form-control"  name="ttype" value="">
                <option value="bbb" selected>Test</option>
                <option value="aaa" >Lumpsum</option>
            </select></td>
            <input type="text" class="form-control parsley-success" name="tvalue" >
            </td>
        </tr>
        <tr>
            <td>
            <input type="text" class="form-control" name="tname"  value="">
            </td>
            <td>
            <select ng-model="selection1" class="form-control"  name="ttype" value="">
                <option value="bbb" selected>Test</option>
                <option value="aaa" >Lumpsum</option>
            </select></td>
            <input type="text" class="form-control parsley-success" name="tvalue" >
            </td>
        </tr>
        <tr>
            <td>
            <input type="text" class="form-control" name="tname"  value="">
            </td>
            <td>
            <select ng-model="selection1" class="form-control"  name="ttype" value="">
                <option value="bbb" selected>Test</option>
                <option value="aaa" >Lumpsum</option>
            </select></td>
            <input type="text" class="form-control parsley-success" name="tvalue" >
            </td>
        </tr>
    </table>
   <input type="submit" name="save" value="save"/>
   </form>

我有3行表，所以我需要生成3个json对象数组

"data" : [
 {
    "tname":"{tr1 name}",
    "value":"{tr1 tvalue}",
    "ttype":"{tr1 ttype}",
    "index":"index 1"
    },
    {
    "tname":"{tr2 name}",
    "value":"{tr2 tvalue}",
    "ttype":"{tr2 ttype}",
    "index":"index 2"
    },
    {
    "tname":"{tr3 tname}",
    "value":"{tr3 tvalue}",
    "ttype":"{tr3 ttype}",
    "index":"index 3"
    }
]

如果我有 10 个表行，这意味着我需要生成一个新的行对象。

拜托，任何人都可以建议在 AngularJS 中执行此操作的正确方法吗？

最佳答案

基于jsFiddle SO的解决方案。

关于 jsfiddle 的示例.

angular.module('ExampleApp', [])
  .controller('firstCtrl', function($scope, $filter) {
    $scope.cloneRow = function(comment) {
      $scope.finalJson.comments.push({});
    };
    $scope.finalJson = {
      comments: [{name:"Basic",type:"",value:"",index:1},
      				  {name:"house rent allowance",type:"",value:"",index:2},
                {}]
    };

    $scope.removeRow = function(index) {
      $scope.finalJson.comments.splice(index, 1);
    };
    $scope.submit = function() {
      var json = JSON.stringify($scope.finalJson.comments);
      console.log(json);
      alert(json);
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="firstCtrl">
    <table>
      <tr ng-repeat="comment in finalJson.comments">
        <td>
          <input ng-disabled="$index<2" type="text" ng-model="comment.name" class="form-control" value="" placeholder="Special Allowance" />
        </td>
        <td>
          <select ng-model="comment.type" class="form-control" name="">
            <option value="">-- Select an option--</option>
            <option value="Percentage" selected>Percentage</option>
            <option value="Percentage">Lumpsum</option>
          </select>
        </td>
        <td>
          <input type="text" ng-model="comment.value" class="form-control parsley-success">
          <input type="hidden" ng-model="comment.index" ng-show="(comment.index=$index) ||1==1" class="form-control parsley-success">
        </td>
        <td>
          <button ng-show="finalJson.comments.length>2 && $index>2" type="button" ng-click="removeRow($index)" class="btn btn-danger" data-type="plus">Minus
            <span class="glyphicon glyphicon-minus"></span>
          </button>
          <button  ng-hide="$index<2" type="button" ng-click="cloneRow()" class="btn btn-success btn-number" data-type="plus">Add
            <span class="glyphicon glyphicon-plus"></span>
          </button>
        </td>
      </tr>
    </table>
    <pre>{{finalJson.comments|json}}</pre>
    <button ng-click="submit()">
      Submit
    </button>
  </div>
</div>

关于javascript - AngularJS JSON 格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35498307/

javascript AngularJS 34 gt lt jquery json

有关javascript - AngularJS JSON 格式的更多相关文章

ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby-on-rails - 将 Ruby 中的日期/时间格式化为 YYYY-MM-DD HH :MM:SS - 2
这个问题在这里已经有了答案:Railsformattingdate(4个答案)关闭4年前。我想格式化Time.Now函数以显示YYYY-MM-DDHH:MM:SS而不是:“2018-03-0909:47:19+0000”该函数需要放在时间中.现在功能。require‘roo’require‘roo-xls’require‘byebug’file_name=ARGV.first||“Template.xlsx”excel_file=Roo::Spreadsheet.open(“./#{file_name}“,extension::xlsx)xml=Nokogiri::XML::Build
ruby - 我可以将我的 README.textile 以正确的格式放入我的 RDoc 中吗？ - 2
我喜欢使用Textile或Markdown为我的项目编写自述文件，但是当我生成RDoc时，自述文件被解释为RDoc并且看起来非常糟糕。有没有办法让RDoc通过RedCloth或BlueCloth而不是它自己的格式化程序运行文件？它可以配置为自动检测文件后缀的格式吗？(例如README.textile通过RedCloth运行，但README.mdown通过BlueCloth运行) 最佳答案使用YARD直接代替RDoc将允许您包含Textile或Markdown文件，只要它们的文件后缀是合理的。我经常使用类似于以下Rake任务的东西:
ruby - 是否有用于序列化和反序列化各种格式的对象层次结构的模式？ - 2
给定一个复杂的对象层次结构，幸运的是它不包含循环引用，我如何实现支持各种格式的序列化？我不是来讨论实际实现的。相反，我正在寻找可能会派上用场的设计模式提示。更准确地说:我正在使用Ruby，我想解析XML和JSON数据以构建复杂的对象层次结构。此外，应该可以将该层次结构序列化为JSON、XML和可能的HTML。我可以为此使用Builder模式吗？在任何提到的情况下，我都有某种结构化数据-无论是在内存中还是文本中-我想用它来构建其他东西。我认为将序列化逻辑与实际业务逻辑分开会很好，这样我以后就可以轻松支持多种XML格式。最佳答案我最
ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2
是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？最佳答案您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s
ruby-on-rails - 如何在 Rails 中设置路由的默认格式？ - 2
路由有如下代码:resources:orders,only:[:create],defaults:{format:'json'}resources:users,only:[:create,:update],defaults:{format:'json'}resources:delivery_types,only:[:index],defaults:{format:'json'}resources:time_corrections,only:[:index],defaults:{format:'json'}是否可以使用1个字符串为所有资源设置默认格式，每行不带“默认值”散列？谢谢。
ruby-on-rails - Rails 4 WYSIWYG Bootsy 不显示格式 - 2
我刚刚按照thebootsygempage上的安装说明进行操作在我保存并查看帖子内容之前，一切看起来都不错。这是输出在View中的样子:HeaderSubhead:似乎没有呈现任何html格式，因为它被引号或类似的东西转义了-其他人有这个问题吗？我没有在github页面或SO上看到任何问题来指出我正确的方向。除了遵循gem安装说明之外，我还没有做任何事情，但也许我错过了什么或者只是犯了一个愚蠢的错误。如果你还有什么想知道的，请尽管问。干杯最佳答案你需要有这样的东西，转义html: 关
ruby - 在 Ruby 中将整数格式化为固定长度的字符串 - 2
有没有一种简单的方法可以将给定的整数格式化为具有固定长度和前导零的字符串？#convertnumberstostringsoffixedlength3[1,12,123,1234].map{|e|???}=>["001","012","123","234"]我找到了解决方案，但也许还有更聪明的方法。format('%03d',e)[-3..-1] 最佳答案如何使用%1000而不是进行字符串操作来获取最后三位数字？[1,12,123,1234].map{|e|format('%03d',e%1000)}更新:根据theTinMan的
ruby-on-rails - 如何正确格式化字符串，如 'mccdougal' 到 'McDougal' - 2
什么Ruby或RailsDSL会将字符串"mccdougal"格式化为"McDougal"，同时留下字符串"McDougal"原样？将titleize传递给"McDougal"结果如下:"McDougal".titleize#=>"McDougal" 最佳答案据我所知，没有可以处理这种情况的Rails助手。这是一个非标准的边缘案例，需要特殊处理。但是，您可以创建自定义字符串变形。您可以将这段代码放入初始化程序中:ActiveSupport::Inflector.inflections(:en)do|inflect|inflect.
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

javascript - AngularJS JSON 格式

有关javascript - AngularJS JSON 格式的更多相关文章

随机推荐