您的位置：首页 > 其它

如何实现增删改查三

2018-04-04 09:37 120 查看 
<!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 (s
4000
uccess) {
$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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航