//网页的增删
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<title></title>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<h2>您的购物车</h2>
<input type="text" name="" id="" value="" title="按商品名查询" ng-model="qname"/>
<table align="center" border="1px" cellspacing="0px" style="width: 60%;">
<tr>
<td>商品编号</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品单价</td>
<td>商品总价</td>
<td>商品操作</td>
</tr>
<tr ng-repeat="x in datas | filter:{name:sel} |orderBy:selOrder">
<td>{{x.id}}</td>
<td>{{x.sname}}</td>
<td><input type="number" ng-model="x.num" /> </td>
<td>{{x.price | currency:"￥"}}</td>
<td>{{x.num*x.price | currency:"￥"}}</td>
<td><button ng-click="remove($index)">删除</button></td>
</tr>
</table>
<p>商品总数是：{{getTotal()|currency:"RMB ￥"}}</p>
<script type="text/javascript">
//1.获取Angular模块
var app=angular.module("myapp",[]);
//2.设置控制器
app.controller("myctrl",function($scope){
//初使化为true
//$scope.isShow=false;
//初使化shops
$scope.datas=[{id:"001",sname:"百世",num:5,price:50},
{id:"004",sname:"美年达",num:1,price:200},
{id:"002",sname:"雪碧",num:4,price:30},
{id:"003",sname:"黑加仑",num:7,price:500}];
$scope.ob="";
$scope.isClick=true;
$scope.oo=function(){
if($scope.isClick){
$scope.ob="id";
$scope.isClick=false;
}else{
$scope.ob="-id";
$scope.isClick=true;
}
}
$scope.jj=function(){
if($scope.isClick){
$scope.ob="num";
$scope.isClick=false;
}else{
$scope.ob="-num";
$scope.isClick=true;
}
}
$scope.remove=function(index){
$scope.datas.splice(index,1);
}
//定义方法，计算总的商品价钱
$scope.getTotal=function(){
var total=0;
for (var i = 0; i < $scope.datas.length; i++) {
//进行累加计算
total=total+($scope.datas[i].num*$scope.datas[i].price);
}
return total;
}
});
</script>
</body>
</html>
5347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
