Commit 984f587d authored by 李彥志's avatar 李彥志

Initial commit

parent b40bd8a6
.btn-space {
margin-right: 5px;
}
<!--The content below is only a placeholder and can be replaced.--> <form (ngSubmit)="addMessage()">
<div style="text-align:center"> <p>
<h1> 單品:<input type="text" name="name" [(ngModel)]="name"><br>
Welcome to {{ title }}! 單價:<input type="number" name="price" min="1" [(ngModel)]="price"><br>
</h1> 數量:<input type="number" name="quantity" min="1" [(ngModel)]="quantity"><br>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="> </p>
</div> {{message}}
<h2>Here are some links to help you start: </h2> <button type="submit" class="btn btn-space">新增項目</button>
<ul> <button type="reset" ng-click=" remove()">清空所有項目</button>
<li> </form>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li> <table border="1" >
<li> <tr>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2> <th>動作</th>
</li> <th>商品名稱</th>
<li> <th>商品價格</th>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2> <th>購買數量</th>
</li> <th>小計</th>
</ul> </tr>
<!-- 清單 -->
<ng-container *ngFor="let message of messages">
<tr>
<td><button type="reset">刪除</button></td>
<td>{{ message.name }}</td>
<td>{{ message.price }}</td>
<td>{{ message.quantity }}</td>
<td>{{ message.price * message.quantity}}</td>
</tr>
</ng-container>
<tr>
<td colspan="4" align="right">加總</td>
<td></td>
</tr>
</table>
<!-- <ng-container *ngFor="let message of messages">
<p>商品名稱:{{ message.name }}</p>
<p>商品價格:{{ message.price }}</p>
<p>購物數量:{{ message.quantity }}</p>
<p>小計:{{ message.price * message.quantity}}</p>
</ng-container> -->
<router-outlet></router-outlet>
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { Message } from './message';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
...@@ -6,5 +7,42 @@ import { Component } from '@angular/core'; ...@@ -6,5 +7,42 @@ import { Component } from '@angular/core';
styleUrls: ['./app.component.css'] styleUrls: ['./app.component.css']
}) })
export class AppComponent { export class AppComponent {
title = 'P2';
name = '';
price = '';
quantity = '';
messages: Message[] = [];
addMessage(): void {
// 防呆,避免名稱或內容是空值時也可以留言
if (
!this.name.trim() && !this.messages.trim() && !this.quantity.trim()
) {
return;
}
// 用名稱跟內容產生一個留言的資料物件
const message = new Message(this.name, this.price, this.quantity);
// 將留言的資料物件放進容器裡
this.messages.push(message);
}
total():void {
}
buildMessage(): void {
}
remove(): void {
this.messages.remove(new Message);
}
} }
...@@ -4,13 +4,16 @@ import { NgModule } from '@angular/core'; ...@@ -4,13 +4,16 @@ import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent AppComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
AppRoutingModule AppRoutingModule,
FormsModule
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]
......
export class Message {
name: string;
price: string;
quantity: string;
constructor(name: string, price: string, quantity: string) {
this.name = name;
this.price = price;
this.quantity = quantity;
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment