angular中刪除表格資料的一行
阿新 • • 發佈：2019-01-30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<style>
table{
width: 500px;
height: 300px;
border-collapse: collapse;
text-align: center;
}
td{
border: 1px solid black;
}
</style>
<script>
var myapp = angular.module("myapp", []);
myapp.controller("myCtrl", function ($scope) {
$scope.goods = [
{
gname: "iphone8",
num: "3",
price: "999"
}, {
gname: "iphone7",
num: "4",
price: "599"
}, {
gname: "iphone6",
num: "5",
price: "499"
}, {
gname: "iphone5",
num: "6",
price: "399"
}
];
$scope.allSum=function(){
var allPrice = 0;
for(var i= 0;i<$scope.goods.length;i++){
allPrice+=$scope.goods[i].price*$scope.goods[i].num;
}
return allPrice;
};
//移除一項
$scope.remove=function(index){
if(confirm('確定移除此項嗎？')){
$scope.goods.splice(index,1);
}
if($scope.goods.length==0){
alert('您的購物車為空');
}
};
});
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<table>
<tr>
<td colspan="5">您的購物車</td>
</tr>
<tr>
<td>商品名稱</td>
<td>數量</td>
<td>單價</td>
<td>小計</td>
<td>操作</td>
</tr>
<tr ng-repeat="arr in goods">
<td>{{arr.gname}}</td>
<td>{{arr.num}}</td>
<td>{{arr.price |currency:"RMB ￥ "}}</td>
<td>{{arr.num*arr.price |currency:"RMB ￥ "}}</td>
<td><button ng-click="remove($index)">刪除</button></td>
</tr>
<tr>
<td colspan="5">總金額 <span ng-bind="allSum() | currency:'RMB ￥ '"></span></td>
</tr>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<style>
table{
width: 500px;
height: 300px;
border-collapse: collapse;
text-align: center;
}
td{
border: 1px solid black;
}
</style>
<script>
var myapp = angular.module("myapp", []);
myapp.controller("myCtrl", function ($scope) {
$scope.goods = [
{
gname: "iphone8",
num: "3",
price: "999"
}, {
gname: "iphone7",
num: "4",
price: "599"
}, {
gname: "iphone6",
num: "5",
price: "499"
}, {
gname: "iphone5",
num: "6",
price: "399"
}
];
$scope.allSum=function(){
var allPrice = 0;
for(var i= 0;i<$scope.goods.length;i++){
allPrice+=$scope.goods[i].price*$scope.goods[i].num;
}
return allPrice;
};
//移除一項
$scope.remove=function(index){
if(confirm('確定移除此項嗎？')){
$scope.goods.splice(index,1);
}
if($scope.goods.length==0){
alert('您的購物車為空');
}
};
});
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<table>
<tr>
<td colspan="5">您的購物車</td>
</tr>
<tr>
<td>商品名稱</td>
<td>數量</td>
<td>單價</td>
<td>小計</td>
<td>操作</td>
</tr>
<tr ng-repeat="arr in goods">
<td>{{arr.gname}}</td>
<td>{{arr.num}}</td>
<td>{{arr.price |currency:"RMB ￥ "}}</td>
<td>{{arr.num*arr.price |currency:"RMB ￥ "}}</td>
<td><button ng-click="remove($index)">刪除</button></td>
</tr>
<tr>
<td colspan="5">總金額 <span ng-bind="allSum() | currency:'RMB ￥ '"></span></td>
</tr>
</table>
</body>
</html>