<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
//创建集合,
$scope.jihe = [{
name: "qq",
price: "12.90",
num: 2,
totalPrice: "25.80",
//如果表格中有复选框,添加一个状态属性
state:false
}, {
name: "wx",
price: "23.90",
num: 1,
totalPrice: "23.90",
state:false
}, {
name: "zfb",
price: "99.90",
num: 1,
totalPrice: "99.90",
state:false
}];
//减少一个
$scope.reduce = function(index) {
if($scope.jihe[index].num > 1) {
$scope.jihe[index].num--;
} else{
//调用移除的方法
$scope.remove(index);
}
};
//增加 一个
$scope.add = function(index) {
$scope.jihe[index].num++;
};
//移除一项
$scope.remove=function(index){
if(confirm('确定移除此项吗?')){
$scope.jihe.splice(index,1);
}
};
//清空购物车
$scope.removeAll = function(){
if(confirm('确定清空购物车')){
$scope.jihe=[];
}
}
//全选
$scope.quan = function(){
for(i=0;i<$scope.jihe.length;i++){
if($scope.che == true){
$scope.jihe[i].state =true;
}else{
$scope.jihe[i].state =false;
}
}
}
//单选
$scope.dan= function(){
//定义一个初始变量
var count=0;
//遍历集合
for(i=0;i<$scope.jihe.length;i++){
//如果选中的话,就记录选中了几个
if($scope.jihe[i].state==true){
count++;
}
}
//如果选中的个数等于集合的长度,就代表全选了
if(count==$scope.jihe.length){
$scope.che=true;
}else{
$scope.che=false;
}
}
//获取总价
$scope.zongjia = function(){
//初始化一个变量
var zong = 0;
//遍历集合,然后把每行选中的小计价格加起来就是总价
for(index in $scope.jihe){
zong += $scope.jihe[index].price * $scope.jihe[index].num;
}
return zong;
}
//判断数据源的长度
$scope.getSize = function(){
if($scope.jihe.length > 0 ){
return false;
}else{
return true;
}
}
});
</script>
<body ng-app="myApp" ng-controller="myCtrl">
<h1>我的购物车</h1>
<button ng-click="removeAll()">清空购物车</button>
<center>
<table width="1000" height="300px" border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="che" ng-click="quan()"/></th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totalPrice</th>
<th>option</th>
</tr>
</thead>
<tbody>
<tr style="{{$even?'background-color: #f1f1f1':''}}" ng-repeat="j in jihe">
<td><input ng-model="j.state" type="checkbox" ng-click='dan()'/></td>
<td>{{j.name}}</td>
<td>
{{j.price | currency}}
</td>
<td><button style="background-color: blue;" ng-click="reduce($index)">-</button>
<input type="number" ng-model="j.num" value="{{j.num}}"/>
<button style="background-color: blue;" ng-click="add($index)">+</button></td>
<td><span>{{j.price*j.num | currency}}</span> </td>
<td><button style="background-color: blue;" ng-click="remove($index)">移除</button></td>
</tr>
<tr>
<td colspan="6" ng-bind="zongjia()"></td>
</tr>
</tbody>
</table>
<span ng-show="getSize()">您的购物车为空,请先逛<a href="#">购物车</a></span>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
//创建集合,
$scope.jihe = [{
name: "qq",
price: "12.90",
num: 2,
totalPrice: "25.80",
//如果表格中有复选框,添加一个状态属性
state:false
}, {
name: "wx",
price: "23.90",
num: 1,
totalPrice: "23.90",
state:false
}, {
name: "zfb",
price: "99.90",
num: 1,
totalPrice: "99.90",
state:false
}];
//减少一个
$scope.reduce = function(index) {
if($scope.jihe[index].num > 1) {
$scope.jihe[index].num--;
} else{
//调用移除的方法
$scope.remove(index);
}
};
//增加 一个
$scope.add = function(index) {
$scope.jihe[index].num++;
};
//移除一项
$scope.remove=function(index){
if(confirm('确定移除此项吗?')){
$scope.jihe.splice(index,1);
}
};
//清空购物车
$scope.removeAll = function(){
if(confirm('确定清空购物车')){
$scope.jihe=[];
}
}
//全选
$scope.quan = function(){
for(i=0;i<$scope.jihe.length;i++){
if($scope.che == true){
$scope.jihe[i].state =true;
}else{
$scope.jihe[i].state =false;
}
}
}
//单选
$scope.dan= function(){
//定义一个初始变量
var count=0;
//遍历集合
for(i=0;i<$scope.jihe.length;i++){
//如果选中的话,就记录选中了几个
if($scope.jihe[i].state==true){
count++;
}
}
//如果选中的个数等于集合的长度,就代表全选了
if(count==$scope.jihe.length){
$scope.che=true;
}else{
$scope.che=false;
}
}
//获取总价
$scope.zongjia = function(){
//初始化一个变量
var zong = 0;
//遍历集合,然后把每行选中的小计价格加起来就是总价
for(index in $scope.jihe){
zong += $scope.jihe[index].price * $scope.jihe[index].num;
}
return zong;
}
//判断数据源的长度
$scope.getSize = function(){
if($scope.jihe.length > 0 ){
return false;
}else{
return true;
}
}
});
</script>
<body ng-app="myApp" ng-controller="myCtrl">
<h1>我的购物车</h1>
<button ng-click="removeAll()">清空购物车</button>
<center>
<table width="1000" height="300px" border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="che" ng-click="quan()"/></th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>totalPrice</th>
<th>option</th>
</tr>
</thead>
<tbody>
<tr style="{{$even?'background-color: #f1f1f1':''}}" ng-repeat="j in jihe">
<td><input ng-model="j.state" type="checkbox" ng-click='dan()'/></td>
<td>{{j.name}}</td>
<td>
{{j.price | currency}}
</td>
<td><button style="background-color: blue;" ng-click="reduce($index)">-</button>
<input type="number" ng-model="j.num" value="{{j.num}}"/>
<button style="background-color: blue;" ng-click="add($index)">+</button></td>
<td><span>{{j.price*j.num | currency}}</span> </td>
<td><button style="background-color: blue;" ng-click="remove($index)">移除</button></td>
</tr>
<tr>
<td colspan="6" ng-bind="zongjia()"></td>
</tr>
</tbody>
</table>
<span ng-show="getSize()">您的购物车为空,请先逛<a href="#">购物车</a></span>
</center>
</body>
</html>