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 相关文章推荐
兼容FF和IE的动态table示例自写
Oct 21 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP安装全攻略:APACHE
2006/10/09 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
python模块restful使用方法实例
2013/12/10 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
工艺工程师工作职责
2013/11/23 职场文书
服装公司总经理岗位职责
2013/11/30 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
综合内勤岗位职责
2014/04/14 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
测绘工程专业求职信
2014/07/15 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书