发布大型数据表单 Angular JS

Posting Large Data Forms Angular JS

本文关键字：Angular JS 表单 数据表 布大型 数据      更新时间：2023-09-26

我已经为这个项目绞尽脑汁了几个小时。 我一直在搜索JSON，观看YouTube视频，并在这里搜索答案，但仍然无法弄清楚。 我正在尝试使用javascript对象将数据发布到表中。 在将较小的数据发布到表中时，我可以这样做，但不确定为什么我不能使用嵌套的多个对象。

编辑：目前的问题是，当提交按钮时，它没有将提交表单中的数据发布到表中。 我希望能够在表格中添加多个条目，然后添加报价和建议。

其他值得奖励的方面是解释使用包含多个javascript对象的这些类型的数据以及使用angular的数据类型。 大多数文档和 API 拉取一个对象，但不是嵌套对象。

如果您可以解释为什么它不起作用，并让我知道这是否是事件尝试它的正确方法。 http://codepen.io/ddavisgraphics/pen/LExGNB?editors=101 链接到代码笔。

爪哇语 

(function () {
    // start the app 
    var app = angular.module('app', []);
    app.controller("CustomerCtrl", function () {
        // Pull in the Customers 
        this.customers = customerArray;
        // Create New Customers 
        this.newCustomer = {};
        this.AddCustomer = function(newCust) {
            this.customers.push({
                customer: newCust.customer,
                phone: newCust.phone,
                email: newCust.email,
                // start address strings 
                address: {
                    line1: newCust.line1,
                    city: newCust.city,
                    state: newCust.state,
                    zip: newCust.zip,
                },
            });
            console.log(customerArray); 
            //console.log(this.newCustomer); 
        };
    });

    var customerArray = [
    // Start Customer  
    {
        customer: "John Franklin",
        phone: "555.555.5551",
        email: "jfranklin@franks.com",
        // start address strings 
        address: {
            line1: "Road or Po Box",
            city: "Glenvilles",
            state: "West Carolina",
            zip: 45648,
        },
        proposals: [{
            project_title: "Project Title",
            type: "Graphic Design",
            deadline: "Jan. 2, 2015",
            delivery_type: "files",
            problem: "The problem is that the customer has too much crap.",
            notes: "Wants to keep the neon pink color scheme"
        }, {
            project_title: "Project Title II",
            type: "Web Design",
            deadline: "Jan. 22, 2015",
            delivery_type: "online",
            problem: "Another prject",
            notes: "Wants neon green with the neon pink on a digital screen"
        }],
        quotes: [{
            quote_num: 002,
            project_title: "Project Title",
            type: "Graphic Design",
            deadline: "Jan. 2, 2015",
            billable_hrs: 11,
            hourly_rate: 42.50,
            external_cost: 33.99,
            tax: .6,
        }, ],
    }, // End Customer
    // Start Customer  
    {
        customer: "John Franklin",
        phone: "555.555.5551",
        email: "jfranklin@franks.com",
        // start address strings 
        address: {
            line1: "Road or Po Box",
            city: "Glenvilles",
            state: "West Carolina",
            zip: 45648,
        },
        proposals: [{
            project_title: "Project Title",
            type: "Graphic Design",
            deadline: "Jan. 2, 2015",
            delivery_type: "files",
            problem: "The problem is that the customer has too much crap.",
            notes: "Wants to keep the neon pink color scheme"
        }, {
            project_title: "Project Title II",
            type: "Web Design",
            deadline: "Jan. 22, 2015",
            delivery_type: "online",
            problem: "Another prject",
            notes: "Wants neon green with the neon pink on a digital screen"
        }],
        quotes: [{
            quote_num: 001,
            project_title: "Project Title  - Quote",
            type: "Graphic Design",
            deadline: "Jan. 2, 2015",
            billable_hrs: 11,
            hourly_rate: 42.50,
            external_cost: 33.99,
            tax: .6,
        }, ];
    }, // End Customer
    ];
})();

.HTML

<body ng-app="app" ng-controller="CustomerCtrl as cust" >
    <h2> Customers </h2>
    <table>
      <tbody>
        <tr>
          <th>Customer</th>
          <th>Phone</th> 
          <th>Email</th>
          <th>Address</th>
          <th>Proposals</th>
          <th>Quotes</th>
        </tr>
        <tr ng-repeat="customer in cust.customers">
          <td> {{customer.customer}}</td>
          <td> {{customer.phone}} </td>
          <td>{{customer.email}}</td>
          <td>
              <ul class="address"> 
                <li> {{customer.address.line1}} </li> 
                <li> {{customer.address.city}}, {{customer.address.state }} , {{customer.address.zip}}</li>
              </ul> 
          </td>
          <td>
             <ul >
                <li ng-repeat="prop in customer.proposals">{{prop.project_title}}</li>
             </ul>
          </td>
          <td>
            <ul >
                <li ng-repeat="quote in customer.quotes ">{{quote.quote_num}}</li>
             </ul>
          </td>
        </tr>
      </tbody>
    </table>

  <div>
  <form novalidate class="simple-form" ng-submit="cust.AddCustomer(new)">
    <h2> Add A Customer</h2>
    <label> Customer Name:</label> <input type="text" ng-model="customer" /><br />
     <label>Customer Email:</label> <input type="email" ng-model="email" /><br />
     <label>Customer Phone:</label> <input type="text" ng-model="phone" /><br />
     <label>Customer Address:</label> 
    <input type="text" ng-model="line1" placeholder="Address/ PO Box"/><br />
    <input type="text" ng-model="city"placeholder="City" /><br />
    <input type="text" ng-model="state" placeholder="State"/><br />
    <input type="text" ng-model="zip" placeholder="Zip" /><br /><br/>
    <button type="submit"> Submit </button> 
  </form>
</div>
  <div class="newCustomerData"> 
    <h2> The Customer Your Adding: </h2>
    <div><strong>Name:</strong> {{customer}} </div>
    <div><strong>Email:</strong> {{email}} </div>
    <div><strong>Phone:</strong> {{phone}} </div>
    <div><strong>Address:</strong> {{line1}}<br/> {{city}}, {{state}} {{zip}} </div>
  </div>
  </body>

您传递的 AddCustomer（new），但您的表单未将输入收集到"新"对象中。尝试调整您的ng模型，使其在"新"对象上有一个点：

 <label> Customer Name:</label> <input type="text" ng-model="new.customer" /><br />
 <label>Customer Email:</label> <input type="email" ng-model="new.email" /><br />
 <label>Customer Phone:</label> <input type="text" ng-model="new.phone" /><br />
 <label>Customer Address:</label> 
<input type="text" ng-model="new.line1" placeholder="Address/ PO Box"/><br />
<input type="text" ng-model="new.city"placeholder="City" /><br />
<input type="text" ng-model="new.state" placeholder="State"/><br />
<input type="text" ng-model="new.zip" placeholder="Zip" /><br /><br/>

您在表单绑定范围级别 JavaScript 对象上的输入不存在，并且您正在尝试从 newcust 对象获取数据 添加新库斯特。到表单中的 ng 模型

使用这个

<input type="email" ng-model="newcust.email" />

取而代之的是这个

<input type="email" ng-model="email" />

对于地址字段，您需要添加newcust.address like

<input type="text" ng-model="newcust.address.line1" placeholder="Address/ PO Box"/><br />
相关文章：