AngularJs表格增刪
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../libs/angular.min.js"></script>
<style>
/*偶數行隔行變色*/
table tr:nth-child(even) {
background: #f89;
}
/*奇數行隔行變色*/
table tr:nth-child(odd) {
background: #ccc;
}
</style>
<script>
var App = angular.module("App", []);
App.controller("Demo", function($scope) {
$scope.allMoney = 0;
$scope.shops = [{
name: "鼠標",
num: 1,
price: 10.00,
}, {
name: "鍵盤",
num: 1,
price: 6.00,
}, {
name: "主機",
num: 1,
price: 30.00,
}];
//求小計的和
for(var i = 0; i < $scope.shops.length; i++) {
var z = $scope.shops[i].num * $scope.shops[i].price;
$scope.allMoney = z + $scope.allMoney;
}
//刪除的方法
$scope.del = function(na) {
if(window.confirm("確認刪除" + na + "嗎？")) {
for(index in $scope.shops) {
if(na == $scope.shops[index].name) {
$scope.shops.splice(index, 1);
if($scope.shops.length == 0) {
alert("購物車爲空，去商場逛一逛吧！");
}
}
}
}
//刪除時讓總價也隨着減少
$scope.allMoney = 0;
for(var i = 0; i < $scope.shops.length; i++) {
var xiao = $scope.shops[i].num * $scope.shops[i].price;
$scope.allMoney = $scope.allMoney-xiao;
}
}
//添加的和
$scope.add = function() {
$scope.shops.push({
name: $scope.newName,
num: $scope.newNum,
price: $scope.newPrice,
price1: $scope.newPrice_sum,
});
//求小計相加的和
$scope.allMoney = 0;
for(var i = 0; i < $scope.shops.length; i++) {
var z = $scope.shops[i].num * $scope.shops[i].price;
$scope.allMoney = z + $scope.allMoney;
}
}
});
</script>
</head>
<body ng-app="App" ng-controller="Demo">
<table border="1" align="center" width="450px">
<thead>
<tr>
<td>序號</td>
<td>商品名稱</td>
<td>數量</td>
<td>單價</td>
<td>小計</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="sh in shops">
<td>{{$index+1}}</td>
<td>{{sh.name}}</td>
<td>{{sh.num}}</td>
<td>{{sh.price | currency:"RMB￥"}}</td>
<td>{{sh.price * sh.num| currency:"RMB￥"}}</td>
<td>
<input type="button" value="刪除" ng-click="del(sh.name)" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<!--價錢起前面加"RMB￥"-->
<td colspan="6">總價爲:{{allMoney | currency:"RMB￥"}}</td>
</tr>
</tfoot>
</table>
<hr style="border-color: red;" />
<!--添加的佈局-->
<form style="margin-left: 600px; margin-top: 60px;">
名稱：<input type="text" ng-model="newName" /><br /> 數量：
<input type="text" ng-model="newNum" /><br /> 單價：
<input type="text" ng-model="newPrice" /><br />
<button ng-click="add()">添加</button>
<input type="reset" value="重置" />
</form>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
AngularJs過濾器使用
過濾器可以用來格式化需要展示給用戶的數據。在Angular中既可以是在HTML中，也可以是在Js文件中這兩個地方來使用過濾器。 下面就拿字符串轉換爲大寫的來舉例。 1）HTML中轉化 在HT