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 相关文章推荐
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
javascript中的面向对象
Mar 30 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 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
一个简单实现多条件查询的例子
2006/10/09 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
Python中的闭包总结
2014/09/18 Python
Python lambda和Python def区别分析
2014/11/30 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
python 类之间的参数传递方式
2019/12/20 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
影视艺术学院毕业生自荐信
2013/11/13 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
简历的自我评价
2014/02/03 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
拾金不昧表扬信
2015/01/16 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS