本文是一个简单的购物车练习，功能包括增加、减少某商品的数量，从而影响该商品的购买总价以及所有商品的购买总价；从购物车内移除一项商品；清空购物车。
页面效果如图：
若使用js或jQuery来实现这个页面，会需要绑定很多事件，如减少数量按钮事件，增加数量按钮事件，移除某项商品事件，清空购物车事件，而这些事件之中很多代码很重复，比如计算某项商品的总购买价，计算所有商品的购买总价，不胜其烦，现在有了AngularJS，则简单许多，因为数据模型双向绑定等原因。
上图页面的代码：
html
[html] view plain copy
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>angular购物车练习</title>
- <link rel="stylesheet" href="../../vendor/bootstrap3/css/bootstrap.css">
- <script src="../../vendor/angular/angular.min.js"></script>
- <script src="app/index2.js"></script>
- </head>
- <body ng-app="myApp" ng-controller="myCtrl">
- <div class="container">
- <table class="table" ng-show="cartList.length > 0">
- <thead>
- <tr>
- <th>产品编号</th>
- <th>产品名称</th>
- <th>购买数量</th>
- <th>产品单价</th>
- <th>产品总价</th>
- <th>操作</th>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="item in cartList">
- <td>{{item.id}}</td>
- <td>{{item.name}}</td>
- <td>
- <button ng-click="reduceOne(item.id)" class="btn btn-primary">-</button>
- <input type="text" ng-model="item.quantity">
- <button ng-click="addOne(item.id)" class="btn btn-primary">+</button>
- </td>
- <td>{{item.price}}</td>
- <td>{{item.quantity * item.price}}</td>
- <td><button ng-click="remove(item.id)" class="btn btn-danger">移除</button></td>
- </tr>
- <tr>
- <td>总购买价</td>
- <td>{{totalCost()}}</td>
- <td>总购买数量</td>
- <td>{{totalCount()}}</td>
- <td colspan="3"><button ng-click="cartList=[]" class="btn btn-danger">清空购物车</button></td>
- </tr>
- </tbody>
- </table>
- <h4 ng-show="cartList.length < 1">您的购物车暂无商品</h4>
- </div>
- </body>
- </html>
index2.js :
[javascript] view plain copy
- var app=angular.module("myApp",[]);
- app.controller("myCtrl",function($scope){
- $scope.cartList=[
- {id:1000,name:"iphone5s",quantity:3,price:4300},
- {id:1001,name:"iphone5",quantity:30,price:3300},
- {id:1002,name:"imac",quantity:3,price:3000},
- {id:1003,name:"ipad",quantity:5,price:6900}
- ];
- var findIndex=function(id){
- var index=-1;
- angular.forEach($scope.cartList,function(item,key){
- if(item.id == id){
- index=key;
- return;
- }
- });return index;
- };
- //从cartList数组中删除一项产品
- $scope.remove=function(id){
- var index=findIndex(id);
- if(index != -1){
- $scope.cartList.splice(index,1);
- }
- };
- //为某个商品添加一个数量
- $scope.addOne=function(id){
- var index=findIndex(id);
- if(index != -1){
- $scope.cartList[index].quantity ++;
- }
- };
- //位某个商品减少一个数量
- $scope.reduceOne=function(id){
- var index=findIndex(id);
- if(index != -1){
- var item=$scope.cartList[index];
- if(item.quantity > 1){
- item.quantity --;
- }else{
- var returnKey=confirm("删除该商品？");
- if(returnKey){
- $scope.remove(item.id);
- }
- }
- }
- };
- //总购买价
- $scope.totalCost=function(){
- var total=0;
- angular.forEach($scope.cartList,function(item,key){
- total += item.quantity * item.price;
- });return total;
- };
- //总购买数量
- $scope.totalCount=function(){
- var count=0;
- angular.forEach($scope.cartList,function(item,key){
- count += item.quantity;
- });return count;
- };
- //监听输入框更改事件避免输入负数或字符串
- $scope.$watch(‘cartList‘,function(newValue,oldValue){
- console.log( "$scope.cartList === newValue "+ ($scope.cartList === newValue) ); //永远为ture newValue指向cartList
- console.log( "$scope.cartList === oldValue "+ ($scope.cartList === oldValue) ); //页面初始化后为true 一旦改动永远为false
- angular.forEach(newValue,function(item,key){
- if( isNaN(item.quantity) ){
- item.quantity=oldValue[key].quantity;
- }
- else if( item.quantity <= 0 ){
- var returnKey=confirm("删除该商品？");
- if(returnKey){
- $scope.remove(item.id);
- }else{
- item.quantity=oldValue[key].quantity;
- }
- }
- });
- },true);
- });
页面中的指令：
ng-app 指定一个应用程序
ng-controller 指定一个控制器
ng-show 值表达式为 true 时，显示本Dom
ng-repeat 重复本Dom
ng-click 指定一个单击事件
时间： 2024-10-07 13:53:22