Angular 模擬簡單購物車
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/angular.min.js"></script>
<style>
a {
color: red;
text-decoration: none;
margin-left: 170px;
}
</style>
<script>
var App = angular.module("App", []);
App.controller("Demo", function($scope) {
$scope.datas = [{
state: false,
pic: "ab.jpg",
goodsname: "純手工製作木質時鐘精緻傢俱裝飾擺件",
nums: 1,
price: 150
}, {
state: false,
pic: "ae.jpg",//圖片
goodsname: "木質藍牙音箱包郵實木傢俱裝飾擺件",
nums: 2,
price: 119
}, {
state: false,
pic: "an.jpg",
goodsname: "裝飾木雕，獨特趣味設計傢俱裝飾擺件",
nums: 0,
price: 120
}]
//數量減減
$scope.jian = function(index) {
if($scope.datas[index].nums < 1) {
alert("數量不能爲負數！");
} else {
$scope.datas[index].nums--;
}
}
//數量加加
$scope.jia = function(index) {
$scope.datas[index].nums++;
}
//刪除數據
$scope.del = function(index) {
if(confirm("確認要刪除麼？")) {
$scope.datas.splice(index, 1);
}
}
//全選或全不選
$scope.checkedAllFun = function() {
if($scope.checkedAll) {
for(var x = 0; x < $scope.datas.length; x++) {
$scope.datas[x].state = true;
}
} else {
for(var x = 0; x < $scope.datas.length; x++) {
$scope.datas[x].state = false;
}
}
}
//計算總價
$scope.totalprice = function() {
$scope.to_price = 0;
for(var i = 0; i < $scope.datas.length; i++) {
$scope.to_price += $scope.datas[i].nums * $scope.datas[i].price;
}
}
$scope.to_price = 0;
})
</script>
</head>
<body ng-controller="Demo">
<center>
<h1>購物車</h1>
<table>
<tr ng-repeat="x in datas">
<td><input type="checkbox" ng-model="x.state" /></td>
<td><img ng-src="{{x.pic}}" /></td>
<td><span>{{x.goodsname}}</span><br /><br />
<span>{{x.price}}</span> <br /><br />
<button ng-click="jian($index)">-</button> {{x.nums}}
<button ng-click="jia($index)">+</button>
<a href="#" ng-click="del($index)">刪除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" ng-click="checkedAllFun()" ng-model="checkedAll" />全選 </td>
<td> 合計：{{to_price}} </td>
<td><button ng-click="totalprice()">結算</button></td>
</tr>
</table>
</center>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
AngularJs過濾器使用
過濾器可以用來格式化需要展示給用戶的數據。在Angular中既可以是在HTML中，也可以是在Js文件中這兩個地方來使用過濾器。 下面就拿字符串轉換爲大寫的來舉例。 1）HTML中轉化 在HT