Angular实现购物车计算示例代码


Posted in Javascript onFebruary 21, 2017

使用AngularJS实现一个简单的购物车,主要感受强大的双向绑定和只关注对象不关注界面特性。

先看看界面:

Angular实现购物车计算示例代码

点击+-操作和删除:

Angular实现购物车计算示例代码

这些全部只需要操作数据源就行,不需要关注界面。

实现过程:

一、使用任何语言创建一个服务端:

public class ShoppingCar
  {
    public string Title { get; set; }
    public decimal UnitPrice { get; set; }
    public int Count { get; set; }
  }
public ActionResult GetCar()
    {
      List<ShoppingCar> cars = new List<ShoppingCar>
      {
        new ShoppingCar { Title="苹果",Count=1,UnitPrice=2.5m},
        new ShoppingCar { Title="香蕉",Count=3,UnitPrice=1.5m},
        new ShoppingCar { Title="苦瓜",Count=1,UnitPrice=3.5m},
        new ShoppingCar { Title="黄瓜",Count=3,UnitPrice=2.2m}
      };
      return Json(cars,JsonRequestBehavior.AllowGet);
    }

    public ActionResult AddCar(List<ShoppingCar> car)
    {
      return Json("ok", JsonRequestBehavior.AllowGet);
    }

二、前台实现:

<div ng-app="DemoApp" ng-controller='CartController'>
    <table class="table table-striped">
      <thead>
        <tr>
          <td>标题</td>
          <td>单价</td>
          <td>数量</td>
          <td>小计</td>
          <td>删除</td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in ShoppingCar">
          <td>{{item.Title}}</td>
          <td>{{item.UnitPrice}}</td>
          <td>
            <input type="text" ng-cloak ng-model="item.Count" style="width:50px;text-align:center;">
            <button my-adds ng-click="UpdateCar(item.Title,1)" ng-class="{cursors:true}">+</button>
            <button my-minus ng-click="UpdateCar(item.Title,-1)" ng-class="{cursors:true}">-</button>
          </td>
          <td>{{item.Count*item.UnitPrice | number:2}}</td>
          <td><button my-minus ng-click="UpdateCar(item.Title,-100)" ng-class="{cursors:true}">删</button></td>
        </tr>
      </tbody>
    </table>
    <p ng-init=0>总价格:{{ total | number:2}}</p>
    <button type="button" ng-click="submit()">提交</button>
  </div>

三、Angular部分
 

var app = angular.module('DemoApp', []);

  app.controller('CartController', ['$scope', '$http', function ($scope, $http) {
    $scope.ShoppingCar = {}
    var GetCar = function () {
      $http.get('/Employee/GetCar')
      .success(function (response) {
        $scope.ShoppingCar = response;
        GetTotal();
      });
    }
    $scope.total = 0;
    var GetTotal = function () {
      for (var i = 0; i < $scope.ShoppingCar.length; i++) {
        var item = $scope.ShoppingCar[i];
        $scope.total += item.Count * item.UnitPrice;
      }
    }

    $scope.UpdateCar = function (title, count) {
      for (var i = 0; i < $scope.ShoppingCar.length; i++) {
        var item = $scope.ShoppingCar[i];
        if (item.Title == title) {
          item.Count = item.Count + count;//这里可以增加上下限制
          if (item.Count < 0) {
            $scope.ShoppingCar.splice(i, 1);
          }
        }
      }
      GetTotal();
    }
    $scope.submit = function () {
      $http.post('/Employee/AddCar', $scope.ShoppingCar)
          .success(function (response) {
          alert(response);
      });
    }
    GetCar();
  }]);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 Javascript
原生js实现倒计时--2018
Feb 21 #Javascript
vue-router:嵌套路由的使用方法
Feb 21 #Javascript
JavaScript中创建对象的7种模式详解
Feb 21 #Javascript
vue-router路由简单案例介绍
Feb 21 #Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 #Javascript
微信小程序 UI与容器组件总结
Feb 21 #Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 #Javascript
You might like
星际原理概述
2020/03/04 星际争霸
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
杏林同学录(二)
2006/10/09 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
在Django框架中编写Context处理器的方法
2015/07/20 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python3 实现调用串口功能
2019/12/26 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
运动会通讯稿200字
2014/02/16 职场文书
公司营业员的自我评价
2014/03/04 职场文书
平安家庭事迹材料
2014/12/20 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers