<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的购物车</title>
<script src="../angular-1.5.5/angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
var data=[{
done:false,
name:"小米",
price:666,
count:1,
}, {
done:false,
name:"华为",
price:888,
count:1,
},{
done:false,
name:"苹果",
price:299,
count:1,
},{
done:false,
name:"小辣椒",
price:555,
count:1,
},{
done:false,
name:"坚果",
price:1999,
count:1,
}
]
myapp.controller("myCtrl",function ($scope) {
//声明
$scope.data=data;
$scope.price=0;
//清空购物车
$scope.deleteAll=function () {
var aa=confirm("你是否确定清空购物车?");
if(aa==true) {
$scope.data.length=0;
}
}
//全选按钮
$scope.gou=function () {
for(var i=0;i<$scope.data.length;i++) {
if($scope.checkAll==true) {
$scope.data[i].done=true;
} else {
$scope.data[i].done=false;
}
}
$scope.numprice();
}
//勾选总价
$scope.numprice=function () {
$scope.price=0;
for(var i=0;i<$scope.data.length;i++) {
if($scope.data[i].done==true) {
$scope.price+=$scope.data[i].count*$scope.data[i].price;
}
}
}
//数量-
$scope.min=function (index) {
$scope.data[index].count--;
$scope.numprice();
if ($scope.data[index].count <= 0) {
$scope.data[index].count=0;
}
}
//数量+
$scope.max=function (index) {
$scope.data[index].count++;
$scope.numprice();
}
//单击删除
$scope.delete=function (index) {
var aa=confirm("你是否确定将选定的商品移出购物车?");
if(aa==true) {
$scope.data.splice(index,1);
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h3>我的购物车</h3>
<button ng-click="deleteAll()">清空购物车</button>
<table border="soild 1px #000" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-click="gou()" ng-model="checkAll">全选</th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totalPrice</th>
<th>option</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td><input type="checkbox" ng-model="item.done" ng-click="numprice()"></td>
<td>{{item.name}}</td>
<td>{{item.price|currency:'¥'}}</td>
<td><span ng-click="min($index)">-</span><input type="text" ng-model="item.count"><span ng-click="max($index)">+</span></td>
<td>{{item.price*item.count|currency:'¥'}}</td>
<td><button ng-click="delete($index)">删除</button></td>
</tr>
</tbody>
</table>
<div>商品总价:<span>{{price|currency:'¥'}}</span></div>
</body>
</html>
//sort排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular-1.5.5/angular.min.js"></script>
<script>
var app = angular.module("myapp",[]);
app.controller("mycont",function ($scope) {
$scope.data = [{
"name":"zs",
"age":"20",
"sex":"boy",
"salary":"15000"
},{
"name":"ls",
"age":"22",
"sex":"boy",
"salary":"13000"
},{
"name":"ww",
"age":"18",
"sex":"girl",
"salary":"12000"
}];
})
</script>
</head>
<body ng-app="myapp" ng-controller="mycont">
<input type="text" ng-model="find"><br><br>
<table cellspacing="0" cellpadding="10" border="soild 1px #000">
<thead>
<tr>
<th ng-click="sort(name)">姓名</th>
<th ng-click="sort(age)">年龄</th>
<th ng-click="sort(sex)">性别</th>
<th ng-click="sort(salary)">薪资</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>{{item.salary}}</td>
</tr>
</tbody>
</table>
<p></p>
</body>
</html>