用angulajs里面的ng-model实现input的默认值,ng-click来实现点击,用ng-if来判断“购物车清单”是否需要显示,用ng-repeate来实现购物车里面的内容的循环输出。
HTML代码如下

<body ng-app="app">
      <div ng-controller="FCtrl">	
		<h2>{{data2.msg}}</h2>
		<input type="text" ng-model="data2.shopcart['0']">
	</div>
	<div ng-controller="Shopping">	
		<input type="text" class="formcontrol" ng-model="goods">
		<span class="input-group-btn">
			<div class="button" ng-click="buy()">添加</div>
		</span>
		
		<h1 ng-if="shopcart.length>0">购物车清单</h1>
		<ul class="list-group">
			<li ng-repeat="item in shopcart track by $index">{{item}}
				<a ng-click="shopcart.splice($index,1)">删除</a></li>
		</ul>
	</div>
</body>

Javascript代码如下:

angular.module("app",[])
.controller('FCtrl',function($scope,Data2){
	$scope.data2=Data2;
})
.controller('Shopping',function($scope,Data2){ //购物车
	$scope.shopcart=Data2.shopcart;
	$scope.buy=function(){
		$scope.shopcart.push($scope.goods);
	}
})

随机文章

新浪微博纪念乔布斯,腾讯微博没有
新浪微博纪念乔布斯,腾讯微博没有

查看android手机记住的wifi密码
查看android手机记住的wifi密码

windows下xampp的mysql中文乱码
windows下xampp的mysql中文乱码

angular表单验证$parsers和$validators方式区别
angular表单验证$parsers和$validators方式区别

分享传智播客最新win8应用开发视频
分享传智播客最新win8应用开发视频

分享jquery仿apple官网伸缩弹性搜索框
分享jquery仿apple官网伸缩弹性搜索框

相关文章

腾讯啥时候发起了搜搜发薪计划
腾讯啥时候发起了搜搜发薪计划

Twitter 更新了图片及影片查看方式
Twitter 更新了图片及影片查看方式

Firefox os和Tizen os将会怎样
Firefox os和Tizen os将会怎样

google drive新增公开文件夹功能,方便协作
google drive新增公开文件夹功能,方便协作

邮件搬家:转移旧邮箱邮件至新邮箱
邮件搬家:转移旧邮箱邮件至新邮箱

内容分享:道招
本文链接:AngularJs用ng-click,ng-if等轻松实现购物车功能
道招声明:除特别标注或作者不详外,本站所有文章均为原创,转载请注明。欢迎共同关注互联网!