我在这个项目上花了好几个小时。我一直在搜索JSON，观看youtube视频，并在这里搜索答案，但仍然无法弄清楚这一点。我正在尝试使用javascript对象将数据发布到表中。在将较小的数据发布到表时，我可以这样做，但不确定为什么我不能使用嵌套的多个对象。
修改 目前的问题是，当提交按钮时，它不会将提交表单中的数据发布到表中。我希望能够在表格中添加多个条目，然后添加引号和提案。
其他可能是奖励的方面是解释使用包含多个javascript对象的这些类型的数据并使用使用angular的那些数据。大多数文档和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>
答案 0 :(得分：2)
您传递的AddCustomer（新），但您的表单未将输入收集到“新”对象中。 尝试调整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/>
答案 1 :(得分：0)
您在表单绑定范围级别上的输入不存在的JavaScript对象，并且您尝试从 newcust 对象获取数据 添加新的。到表单中的ng-model
使用此
<input type="email" ng-model="newcust.email" />
而不是这个
<input type="email" ng-model="email" />
对于地址字段，您需要添加newcust.address，如
<input type="text" ng-model="newcust.address.line1" placeholder="Address/ PO Box"/><br />