<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js"></script>
<!--<script src="js/jquery-3.2.1.min.js"></script>-->
<script>
var app = angular.module("myApp",[]);
app.controller("democ",["$scope",function($scope){
$scope.zj = 0;
$scope.datalist=[{name:'鼠标',num:'1',danjia:'101'},{name:'键盘',num:'3',danjia:'601'},{name:'耳机',num:'1',danjia:'3001'}];
/* $scope.num = 0;
$scope.danjia = 0;*/
$scope.shan = function(i){
$scope.datalist.splice(i,1);
if($scope.datalist.length==0){
alert("购物车为空");
}
$scope.zj = 0;
for(var i =0;i<$scope.datalist.length;i++){
$scope.zj=$scope.zj+($scope.datalist[i].num*$scope.datalist[i].danjia);
}
};
for(var i =0;i<$scope.datalist.length;i++){
$scope.zj=$scope.zj+($scope.datalist[i].num*$scope.datalist[i].danjia);
}
}]);
</script>
</head>
<body ng-app="myApp" ng-controller="democ">
<h1>您的购物车</h1>
<table border="1px" width="800px" cellpadding="0" cellspacing="0">
<tr>
<td>名称</td>
<td>数量</td>
<td>单价</td>
<td>小计</td>
</tr>
<tr ng-repeat="dlist in datalist">
<td>{{dlist.name}}</td>
<td>{{dlist.num}}</td>
<td>{{dlist.danjia|currency:'RMB ¥'}}</td>
<td>{{dlist.num*dlist.danjia|currency:'RMB ¥'}} <input type="button" value="删除" ng-click="shan($index)"/></td>
</tr>
<tr >
<td colspan="4">总金额{{zj|currency:'¥'}}</td>
</tr>
</table>
</body>
</html>
angular js 简单购物车
最新推荐文章于 2024-09-14 18:52:56 发布