1
我一直在这个项目上花费了几个小时。我一直在搜索JSON，观看YouTube视频，并在这里寻找答案，但仍然无法弄清楚。我试图使用javascript对象将数据发布到表中。当将较小的数据发布到表中时，我可以这样做，但不知道为什么我无法处理嵌套的多个对象。发布大型数据表格Angular JS
编辑： 目前的问题是，当提交按钮时，它不会将提交表单中的数据发布到表格中。我希望能够向表中添加多个条目，然后再添加引号和提议。
其他方面将是奖金解释处理这些类型的数据，其中包含多个JavaScript对象和使用角的那些工作。大多数文档和apis都是针对一个对象，而不是嵌套对象。
如果你能解释它为什么不起作用，并让我知道这是否是尝试它的事件的正确方法。 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: "[email protected]",
// 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: "[email protected]",
// 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>
我编辑了问题。请让我知道如果有帮助，如果没有，我会尽我所能添加更多。谢谢你的时间。 @PSL –
当然。现在看起来很好。检查控制台是否有错误。您在ng模型绑定中缺少'new.'。 http://codepen.io/anon/pen/Bypzve – PSL