关闭

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

66人阅读 评论(0) 收藏 举报
分类:
<!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中
0
2

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2618次
    • 积分:454
    • 等级:
    • 排名:千里之外
    • 原创:44篇
    • 转载:4篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档