发布大数据表单Angular JS
Posting Large Data Forms Angular JS
我已经为这个项目绞尽脑汁好几个小时了。我一直在搜索 JSON，观看 youtube 视频，并在这里搜索答案，但仍然无法弄清楚。我正在尝试使用 javascript 对象将 post 数据转换为 table。当涉及到 posting 较小的数据到 table 时，我可以做到，但不确定为什么我不能使用多个嵌套的对象。
编辑：
当前的问题是当提交按钮时，它没有post将提交表单中的数据发送到table。我希望能够在 table 中添加多个条目，然后再添加报价和建议。
其他有益的方面是解释如何处理包含多个 javascript 对象的这些类型的数据以及如何处理使用 angular 的数据。大多数文档和 api 只为一个对象拉取，而不是嵌套对象。
如果您能解释为什么它不起作用，请告诉我这是否是尝试事件的正确方法。 http://codepen.io/ddavisgraphics/pen/LExGNB?editors=101 Link 到代码笔。
Javascript
(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>
您在表单绑定范围级别 JavaScript 对象上的输入不存在，您正试图从 newcust 对象获取数据
添加新客户。在你的表单中添加到你的 ng-model
使用这个
<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 />
您通过了 AddCustomer(new)，但您的表单并未将输入收集到 'new' 对象中。
尝试调整你的 ng-models 在 'new' 对象上有一个点：
<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/>
我已经为这个项目绞尽脑汁好几个小时了。我一直在搜索 JSON，观看 youtube 视频，并在这里搜索答案，但仍然无法弄清楚。我正在尝试使用 javascript 对象将 post 数据转换为 table。当涉及到 posting 较小的数据到 table 时，我可以做到，但不确定为什么我不能使用多个嵌套的对象。
编辑： 当前的问题是当提交按钮时，它没有post将提交表单中的数据发送到table。我希望能够在 table 中添加多个条目，然后再添加报价和建议。
其他有益的方面是解释如何处理包含多个 javascript 对象的这些类型的数据以及如何处理使用 angular 的数据。大多数文档和 api 只为一个对象拉取，而不是嵌套对象。
如果您能解释为什么它不起作用，请告诉我这是否是尝试事件的正确方法。 http://codepen.io/ddavisgraphics/pen/LExGNB?editors=101 Link 到代码笔。
Javascript
(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>
您在表单绑定范围级别 JavaScript 对象上的输入不存在，您正试图从 newcust 对象获取数据 添加新客户。在你的表单中添加到你的 ng-model
使用这个
<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 />
您通过了 AddCustomer(new)，但您的表单并未将输入收集到 'new' 对象中。 尝试调整你的 ng-models 在 'new' 对象上有一个点：
<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/>