私はこのプロジェクトで何時間も頭を悩ませてきました。私はJSONを検索し、YouTubeビデオを見て、ここで答えを探してきましたが、まだこれを理解できません. JavaScript オブジェクトを使用して、データをテーブルに投稿しようとしています。小さなデータをテーブルに投稿することになると、それはできますが、入れ子になっている複数のオブジェクトを操作できない理由がわかりません。
編集: 現在の問題は、送信ボタンを押したときに、送信フォームのデータがテーブルに投稿されないことです。複数のエントリをテーブルに追加してから、後で見積もりと提案を追加できるようにしたいと考えています。
おまけになる他の側面は、複数のjavascriptオブジェクトを含むこれらのタイプのデータの操作と、角度を使用したデータの操作を説明することです。ほとんどのドキュメントと API は 1 つのオブジェクトをプルしますが、ネストされたオブジェクトはプルしません。
機能しない理由を説明できれば、これがイベントを試行するための正しい方法であるかどうかを教えてください。 http://codepen.io/ddavisgraphics/pen/LExGNB?editors=101 コードペンへのリンク。
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>