<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<script src="script.js" ></script>
<script src="http://code.angularjs.org/1.1.5/angular.min.js" ></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<h1> 訂單登錄系統</h1>
<label>搜尋:</label>
<input type="search" ng-model="search" placeholder="Enter to Search">
</div>
<div id="table1" ng-controller="table">
<table cellpadding="0" border="0" cellspacing="0" >
<tr id="heading">
<th>產品名稱:</th>
<th>客戶:</th>
<th>數量:</th>
</tr>
<tr class="color2" ng-repeat="product in products | filter:search | filter:new_search">
<td>{{product.Rollno}} </td>
<td>{{product.Name}}</td>
<td>{{product.Uni}} </td>
</tr>
</table>
<button ng-click="remove($index)" >刪除一筆</button>
<button ng-click="remove2($index)" >刪除全部</button>
<div >
<label>產品名稱:</label>
<input type="text" ng-model="new_rollno"> <br>
<label>客戶:</label>
<input type="text" ng-model="new_name"><br>
<label>數量:</label>
<input type="number" ng-model="new_uni"><br>
<button ng-click="save()">增加</button>
</div>
<div style="float: right; margin-right: 300px;margin-top: -200px;">
</div>
</div>
</body>
</html>
// Code goes here
var table = function($scope)
{
$scope.products=[
{Rollno: "筆電",Name: "王先生",Uni: "100"},
{Rollno: "手機",Name: "Mary",Uni: "20"},
{Rollno: "平板",Name: "王先生",Uni: "80"},
{Rollno: "PC",Name: "Tom",Uni: "120"},
{Rollno: "PC",Name: "陳先生",Uni: "300"},
{Rollno: "筆電",Name: "Sandy",Uni: "90"},
{Rollno: "筆電",Name: "陳先生",Uni: "250"},
{Rollno: "平板",Name: "Mr.X",Uni: "40"},
{Rollno: "手機",Name: "王先生",Uni: "400"},
{Rollno: "平板",Name: "Mary",Uni: "35"}
];
$scope.save=function(){
$scope.products.push({
Rollno: $scope.new_rollno,
Name: $scope.new_name,
Uni: $scope.new_uni
});
$scope.new_rollno="";
$scope.new_name="";
$scope.new_uni=""
};
$scope.checked=[];
$scope.remove=function(index){
alert($scope.checked);
$scope.products.splice(function(record){
return $scope.checked[$index];
},1);
};
$scope.remove2=function(index){
alert($scope.checked);
$scope.products.splice(function(record){
return $scope.checked[$index];
},10000);
};
};
/* Styles go here */
table
{
width: 100%;
}
table,th,td
{
border: 1px solid black;
}
.color
{
background-color: lightgray;
}
.color2
{
background-color: white;
}
#heading
{
background-color: #FFFFBB;
color: #880000;
}
tr:hover
{
background-color:darkblue;
color: white;
font-weight: bold;
}
#images img
{
margin-top: 10px;
}
#img1
{
width: 33.4%;
}
#img2
{
width: 66%;
height: 255px;
}
#table1
{
margin-top: 10px;
}
label
{
display: block;
margin-bottom: 5px;
margin-top: 5px;
}
button
{
margin-top: 5px;
padding: 5px;
}