关闭

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

214人阅读 评论(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
查看评论

AngularJS表格数据全选反选,批量删除,借助计数器删除

#p{                 font-size: 23px;            ...
  • thw_m
  • thw_m
  • 2017-10-24 16:11
  • 192

ajax返回的json对象循环创建到表格

ajax返回的json对象循环创建到表格  分享| 2012-03-13 11:17cai610182473 | 浏览 3012 次  网络 data 是一个json对象 success : function(data) {...
  • u010523770
  • u010523770
  • 2016-05-25 17:30
  • 2199

AngularJS集合数据遍历显示

AngularJS集合数据遍历显示<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS集合数据...
  • a772304419
  • a772304419
  • 2017-12-26 18:53
  • 108

AngularJs简便的添加数据信息

$scope.add = function(){ // 执行添加的操作 $scope.users.push({ name:$scope.nameId,sex:$scope.sexId,age:$scop...
  • chen_md
  • chen_md
  • 2018-01-18 20:22
  • 29

06集合-AngularJS基础教程

本系列教程以翻译Chris Smith的Angualr Basics为梗概,融合博主自己的理解,为大家提供一个简单明了的学习教程,通过讲解基础、实用的内容,简化学习进程、降低学习难度。本文为系列教程的第6篇,Angular 集合
  • whqet
  • whqet
  • 2015-04-16 11:32
  • 4240

java android 对一个集合进行连续有选择的删除

在我们的一般的代码中,如果想要删除集合里面的几项的话,都是遍历这个这个集合,然后在里面判断一下是不是符合删除的要求,然后进行删除 代码如下: for(int j=0;j<listString.size();j++) { if(booleanList.get(j)){ bool...
  • u010399316
  • u010399316
  • 2015-05-12 17:27
  • 1156

如何正确在集合遍历的时候删除多个元素

前言不管是集合中的遍历还是删除集合中元素,这些操作相比大家都很熟悉,但是在日常开发中,我们有时候会遇到在集合遍历的时候删除集合中的元素。那么这里面有什么哪些小窍门呢?为什么标题上说是删除多个元素,难倒删除多个元素和删除单个元素有什么区别?常见的for循环遍历中删除元素具体代码如下/** * @Cla...
  • qq_28165595
  • qq_28165595
  • 2017-08-07 14:17
  • 907

AngularJS访问服务器获取数据遍历生成表格,附Demo源码

初学angular.js,觉得真是一个强大的前端框架,可结合BootStrap,下面的代码看起来还是挺多,但是除去BootStrap布局代码的话,会精简很多,才学了几天,目前只可以实现排序、筛选、弹窗、全选、取消全选,备注比较全面,适合初学人员,因为从服务器端获取数据需要附带数据库,太麻烦,我就生成...
  • sinat_28147421
  • sinat_28147421
  • 2016-09-10 18:01
  • 5950

使用AngularJS修改、删除表格数据

实现angularJS实现了表格内容的删除和修改的功能,相比直接使用原生js,angularJS显得简单方便很多,减去了DOM操作直接修改数据,将数据绑定使得页面直接根据数据内容来显示,代码更加明了快捷.这也是angularJS的应用面广泛的重要原因!
  • xin_x1n
  • xin_x1n
  • 2016-11-07 20:17
  • 7045

Java 基础 之 集合遍历删除

在日常java 开发中,想要在遍历中删除一个集合中的元素,这是很常见的,但是如果用法不当,那么就会导致系统存在一些隐式bug ! 笔者今天拿list 举例来分析一下,Java 中集合应如何正确删除. 1. 错误删除方式示例:     1.1 在for each 循环...
  • zgf19930504
  • zgf19930504
  • 2016-08-07 09:55
  • 916
    个人资料
    • 访问:8489次
    • 积分:998
    • 等级:
    • 排名:千里之外
    • 原创:88篇
    • 转载:11篇
    • 译文:0篇
    • 评论:0条
    文章分类