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 Ajax调用WCF服务详细教程
Mar 31 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
vue.js的提示组件
Mar 02 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 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
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
javascript 模拟点击广告
2010/01/02 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
python进阶教程之循环对象
2014/08/30 Python
Python装饰器的函数式编程详解
2015/02/27 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Python生成器以及应用实例解析
2018/02/08 Python
python3去掉string中的标点符号方法
2019/01/22 Python
python实现图片转字符小工具
2019/04/30 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
python 连续不等式语法糖实例
2020/04/15 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
综合实践教学反思
2014/01/31 职场文书
思品教学工作总结
2015/08/10 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
八年级历史教学反思
2016/02/19 职场文书