<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
tr:nth-child(even){
background-color: green;
}
tr:nth-child(odd){
background-color: fuchsia;
}
</style>
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller("myCtr",function ($scope,$http) {
$http.get("moni2.json").then(function (success) {
$scope.info=success.data;
})
$scope.getNum=function () {
var num=0;
for (var i = 0; i < $scope.info.length; i++) {
num+=$scope.info[i].gnum;
}
return num;
}
$scope.getPrice=function () {
var total=0;
for (var i = 0; i < $scope.info.length; i++) {
total+=$scope.info[i].gprice*$scope.info[i].gnum;
}
return total;
}
/*根据number框来判断是否删除*/
$scope.jian=function (index) {
if ($scope.info[index].gnum<1) {
if (confirm("是否删除")) {
$scope.info.splice(index,1);
}
}
}
/*删除*/
$scope.del=function (index) {
if (confirm("是否删除?")) {
$scope.info.splice(index,1);
alert("删除成功");
}
}
/*清除购物*/
$scope.qk=function () {
$scope.info.length=0;
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtr" style="width: 800px;">
<h1 style="background-color: yellow;">我的购物车详情</h1>
<input type="text" placeholder="根据名称查询" style="float: right;background-color: yellow;" ng-model="str1" />
<table border="1" cellspacing="0" cellpadding="0" width="100%">
<tr style="background-color: gray;">
<td>商品编号<button ng-click="px='gid'">△</button></td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品单价</td>
<td>价格小计<button ng-click="px='-(gprice*gnum)'">▽</button></td>
<td>操作</td>
</tr>
<tr ng-repeat="s in info|orderBy:px|filter:{'gname':str1}">
<td>{{s.gid}}</td>
<td>{{s.gname}}</td>
<td>
<!--记得number框里的值用ng-model="s.gnum"来绑定-->
<input type="number" ng-model="s.gnum" min="0" ng-click="jian($index)" />
</td>
<td>{{s.gprice}}</td>
<td>{{s.gcount}}</td>
<td><button style="background-color: yellow;" ng-click="del($index)">移除</button></td>
</tr>
</table>
<span>商品总数:{{getNum()}}</span>
<span>商品总价:{{getPrice()}}</span>
<button style="background-color:yellow ;" ng-click="qk()">清空购物车</button>
</body>
</html>
如何实现增删改查三
最新推荐文章于 2023-10-13 18:16:50 发布