购物车
AngularJS 通过新的属性和表达式扩展了 HTML，可以构建一个单一页面应用程序。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<table>
<thead>
<tr>
<td><input type="checkbox" ng-model="select" ng-click="all()">全选</td>
<td>名称</td>
<td>单价</td>
<td>数量</td>
<td>金额</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in shopList ">
<td><input type="checkbox" ng-model="x.m" ng-click="single(x)"></td>
<td >{{x.info}}</td>
<td>{{x.price}}</td>
<td><input type="number" ng-model="x.count" ng-change="countPrice()"></td>
<td>{{x.total}}</td>
<td><button ng-click="delete(x)">删除</button></td>
</tr>
</tbody>
</table>
<br>
总价格{{allPrice}}
</div>
<script>
//创建模块
var app = angular.module("myApp",[]);
//创建控制器
app.controller("myCtrl",function ($scope) {
//购物车
$scope.shopList = [
{ m:"false",num:"0",info:"苹果手机",price:4000,count:1,total:4000},
{ m:"false",num:"1",info:"运动鞋",price:500,count:1,total:500},
{ m:"false",num:"2",info:"电脑",price:5000,count:1,total:5000}
];
$scope.countPrice=function () {
//初始化总价格
$scope.allPrice=0;
angular.forEach($scope.shopList,function (data,index) {
data.total = data.price*data.count;
if(data.m==true){
$scope.allPrice+=data.total;
}
})
}
//全选
$scope.all=function () {
console.log($scope.select)
angular.forEach($scope.shopList,function (data,index) {
data.m=$scope.select;
})
$scope.countPrice();
}
//单选
$scope.single=function (x) {
angular.forEach($scope.shopList,function (data,index) {
if(x.m==data.m){
$scope.countPrice();
}
})
}
//删除
$scope.delete=function (x) {
$scope.shopList.splice( $scope.shopList.indexOf(x),1)
/* angular.forEach($scope.shopList,function (data,index) {
}*/
//计算总价格
$scope.countPrice();
}
})
</script>
</body>
</html>
