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