<!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 簡單購物車
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章