angularJs购物车--（卖药）
效果图：
css代码：
<style>
div{
width: 400px;
height:300px ;
background: #ccc;
}
div p{
width: 300px;
height: 30px;
margin: 0 auto;
margin-top: 20px;
}
div input{
width: 200px;
height: 30px;
}
div button{
display: block;
margin: 0 auto;
margin-top: 20px;
width: 100px;
height: 30px;
}
</style>
html代码：
<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="qx()">全选</button>
<button ng-click="fx()">反选</button>
<button ng-click="qbx()">全不选</button>
<button ng-click="plsc()">批量删除</button>
<button ng-click="allDel()">清空购物车</button>
<button ng-click="add()">添加</button>
<button ng-click="dx(price)">倒序</button>
<input type="text" placeholder="请输入名称" ng-model="search" />
<table border="1" width="100%" >
<tr>
<th>选项 </th>
<th>名称</th>
<th>产地</th>
<th>数量</th>
<th>生产时间</th>
<th>单价</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr ng-repeat="x in goods | filter:{gname:search} | orderBy:order+orderType">
<td><input type="checkbox" ng-model="x.ck" /> </td>
<td>{{x.gname}}</td>
<td>{{x.address}}</td>
<td>
<input type="button" value="-" ng-click="jian($index)" />
<span>{{x.num}}</span>
<input type="button" value="+" ng-click="jia($index)" />
</td>
<td>
{{x.regDate|date:'yyyy-MM-dd hh:mm:ss'}}
</td>
<td>
{{x.price | currency :"￥"}}
</td>
<td>
{{x.num * x.price | currency:"￥"}}
</td>
<td>
<input type="button" value="删除" ng-click="del($index)" />
<input type="button" value="修改" ng-click="upda($index)" />
</td>
</tr>
<tr>
<td colspan="8">
<span>总价</span>
<span ng-bind="allSum()|currency:'￥'"></span>
</td>
</tr>
</table>
<!--添加操作-->
<div ng-show="addShow" >
<p>名称 ： <input ng-model="name" type="text" placeholder="请输入名称" /></p>
<p>产地 ： <input ng-model="addre" type="text" placeholder="请输入产地" /></p>
<p>价格 ： <input ng-model="prices" type="text" placeholder="请输入价格" /></p>
<button ng-click="trueAdd()">确认添加</button>
</div>
<!--修改操作-->
<div ng-show="updShow" >
<p>名称 ： <input ng-model="obj.name" type="text" placeholder="请输入名称" /></p>
<p>产地 ： <input ng-model="obj.addre" type="text" placeholder="请输入产地" /></p>
<p>价格 ： <input ng-model="obj.prices" type="text" placeholder="请输入价格" /></p>
<button ng-click="trueUpd()">确认修改</button>
</div>
</body>
angular代码：
var vm=angular.module('myApp',[])
vm.controller('myCtrl',function($scope,$http){
//如果需要调用外部数据，在scope 后面加上 http 服务
$http.get("yao.json").then(function(res){
$scope.goods=res.data
//修改数据
//定义一个空对象 接受临时数据
$scope.obj={}
//定义一个索引值
var idx=-1
$scope.upda=function($index){
$scope.updShow=true
//将goods里面对应的数据放到obj中
$scope.obj.name=$scope.goods[$index].gname
$scope.obj.addre=$scope.goods[$index].address
$scope.obj.prices=$scope.goods[$index].price
idx=$index
}
//数据修改
$scope.trueUpd=function(){
$scope.goods[idx].gname=$scope.obj.name
$scope.goods[idx].address=$scope.obj.addre
$scope.goods[idx].price=$scope.obj.prices
$scope.updShow=false
}
//添加
$scope.add=function(){
$scope.addShow=true
}
//定义当前时间
// var theTime=new Date().toLocaleTimeString()
//确认添加逻辑实现
$scope.trueAdd=function(){
//赋值操作
var name= $scope.name
var addre= $scope.addre
var prices= $scope.prices
//添加操作
$scope.goods.push({
gname:name,
address:addre,
price:prices,
num:1,
regDate:1371120093221
})
//数据清空
$scope.name=""
$scope.addre =""
$scope.prices =""
$scope.addShow=false
}
//总价
$scope.allSum=function(){
var allProce=0
for (var i=0 ;i<$scope.goods.length;i++) {
allProce+=$scope.goods[i].price * $scope.goods[i].num
}
return allProce
}
//倒序
$scope.order=""
$scope.dx=function(type){
$scope.orderType=type
if ($scope.order=="") {
$scope.order="-"
} else{
$scope.order=""
}
}
//数据加减
//加
$scope.jia=function(index){
$scope.goods[index].num++
}
//减
$scope.jian=function(index){
if ($scope.goods[index].num>1) {
$scope.goods[index].num--
} else{
$scope.goods.splice(index,1)
}
}
//清空购物车
$scope.allDel=function(){
if ($scope.goods.length==0) {
alert("购物车为空")
} else{
$scope.goods=[]
}
}
//批量删除
$scope.plsc=function(){
if (confirm("确定要删除吗？？")) {
for (var i=0 ; i<$scope.goods.length ; i++) {
if ($scope.goods[i].ck==true) {
$scope.goods.splice(i,1)
i--
}
}
}
}
//单个删除
$scope.del=function(index){
$scope.goods.splice(index,1)
}
//全选
$scope.qx=function(){
for (var i=0 ; i<$scope.goods.length ;i++) {
var x=$scope.goods[i]
x.ck=true
}
}
//反选
$scope.fx=function(){
for (var i=0 ; i<$scope.goods.length ;i++) {
var x=$scope.goods[i]
if (x.ck==x.ck) {
x.ck=!x.ck
}
}
}
//全不选
$scope.qbx=function(){
for (var i=0 ; i<$scope.goods.length ;i++) {
var x=$scope.goods[i]
if (x.ck==x.ck) {
x.ck=false
}
}
}
})
})
ok！！！