我已经为这个项目绞尽脑汁好几个小时了。我一直在搜索 JSON，观看 youtube 视频，并在这里搜索答案，但仍然无法弄清楚。我正在尝试使用 javascript 对象将数据发布到表中。当涉及到将较小的数据发布到表中时，我可以这样做，但不确定为什么我不能使用多个嵌套的对象。
编辑: 当前的问题是当提交按钮时，它没有将提交表单中的数据发布到表中。我希望能够向表中添加多个条目，然后再添加报价和建议。
其他有益的方面是解释如何处理包含多个 javascript 对象的这些类型的数据，以及如何处理那些使用 angular.js 对象的数据。大多数文档和 api 只为一个对象拉取，而不是嵌套对象。
如果您能解释为什么它不起作用，请告诉我这是否是尝试事件的正确方法。 http://codepen.io/ddavisgraphics/pen/LExGNB?editors=101 codepen 的链接。
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>
最佳答案
您传递的 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/>
关于javascript - 发布大数据形式 Angular JS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27831999/