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