您的位置：首页 > Web前端 > AngularJS

angularjs遍历集合添加值表格进行删除

2017-11-14 18:44 387 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../kuwenjian/angular.js" ></script>
<script>
var app = angular.module("myapp" , []);
app.controller("mycon" , function($scope){

$scope.a="我是哈哈哈";
$scope.money=101;
$scope.delete=function(index){
$scope.goods.splice(index,1);
$scope.zje=0;

for(inde in $scope.goods){
var ww = $scope.goods[inde].num * $scope.goods[inde].price;
$scope.zje=ww+$scope.zje;
}
}

$scope.goods=[{
name:"鼠标",
num:1,
price:101
},{
name:"键盘",
num:3,
price:601
},{
name:"主机",
num:1,
price:3001
}];

$scope.isShow = function(){
if($scope.goods.length>0){
return true;
}else{
return false;
}
}

$scope.zje=0;

for(inde in $scope.goods){
var ww = $scope.goods[inde].num * $scope.goods[inde].price;
$scope.zje=ww+$scope.zje;
}
});

</script>
</head>
<body ng-app="myapp" ng-controller="mycon">
{{money}}
<h3>您的购物车</h3>
<table width="500" border="1" cellspacing="1">
<thead>
<tr>
<td>商品名称</td>
<td>数量</td>
<td>单价</td>
<td>小计</td>
<td>操作</td>

</tr>
</thead>
<tbody>
<tr ng-repeat="good in goods">
<td>{{good.name}}</td>
<td>{{good.num}}</td>
<td>{{good.price | currency:"RMB￥"}}</td>
<td>{{good.num * good.price | currency:"RMB￥"}}</td>
<td><button ng-click="delete($index)">删除</button></td>
</tr>

<tr>
<td colspan="3"></td>
<td>{{zje}}</td>
<td> </td>
</tr>
</tbody>
</table>
<p ng-if="!isShow()">购物车为空!!!</p>
</body>
</html>


没有注释可以复制运行,在Hbuilder中
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航