AngularJs 實現刪除、小計、總計、點擊按鈕改變數量
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/angular.min.js"></script>
<style>
div {
margin-top: 40px;
}
/* 隔行變色*/
tr:nth-of-type(even) {
background-color: #F5F5F5;
}
tr:nth-of-type(even):hover {
background-color: #FFB6C1;
}
tr:nth-of-type(odd) {
background-color: #CCCCCC;
}
tr:nth-of-type(odd):hover {
background-color: lightsteelblue;
}
</style>
</head>
<body ng-controller="DemoCtrl">
<h1>電子庫存表</h1>
<table border="2" cellspacing="0" width="600px">
<tr>
<td>產品編號</td>
<td>產品名稱</td>
<td>購買數量</td>
<td>產品單價</td>
<td>產品總價</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in datas">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<button ng-click="jian($index)">-</button>
<input type="text" ng-model="x.count" />
<button ng-click="add($index)">+</button>
</td>
<td>{{x.price}}</td>
<td>{{x.price*x.count}}</td>
<td><button ng-click="dele($index)">刪除</button></td>
</tr>
</table>
<div>
<span>總價：{{totalprice()}}</span>
<span>總數：{{totalcount()}}</span>
<button ng-click="removeAll()">清空購物車</button>
</div>
<script>
var App = angular.module("App", []);
App.controller("DemoCtrl", function($scope) {
$scope.datas = [{
id: 1001,
name: "iphoneX",
count: 1,
price: 10800,
}, {
id: 1002,
name: "ipad",
count: 1,
price: 1850,
}, {
id: 1003,
name: "聯想小新",
count: 1,
price: 20800,
}]
//讓數量減減的方法
$scope.jian = function(index) {
if($scope.datas[index].count >= 1) {
$scope.datas[index].count--;
} else {
alert("數量不能爲負數")
}
}
//讓數量加加的方法
$scope.add = function(index) {
$scope.datas[index].count++;
}
//刪除數據的方法
$scope.dele = function(index) {
if(confirm("確認刪除麼？")) {
$scope.datas.splice(index, 1); //splice()第一個參數從哪開始，第二個是刪幾個
}
}
//總價錢
$scope.totalprice = function() {
var to_price = 0
for(var i = 0; i < $scope.datas.length; i++) {
to_price += $scope.datas[i].count * $scope.datas[i].price
}
return to_price;
}
//總數
$scope.totalcount = function() {
var to_count = 0
for(var i = 0; i < $scope.datas.length; i++) {
to_count += $scope.datas[i].count;
}
return to_count;
}
//清空購物車
$scope.removeAll = function() {
$scope.datas = [];
}
});
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
AngularJs過濾器使用
過濾器可以用來格式化需要展示給用戶的數據。在Angular中既可以是在HTML中，也可以是在Js文件中這兩個地方來使用過濾器。 下面就拿字符串轉換爲大寫的來舉例。 1）HTML中轉化 在HT