来自 服务器&运维 2019-12-14 06:31 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

Angular达成购物车总结示例代码_AngularJS_脚本之家

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

本文实例讲述了Angular实现可删除并计算总金额的购物车功能。分享给大家供大家参考,具体如下:

什么是todolist?

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

 www.jb51.net angular可删除与计算总额的购物车   table{ width: 500px; height: 300px; border-collapse: collapse; text-align: center; } td{ border: 1px solid black; }   var myapp=angular.module; myapp.controller("myCtrl",function  { $scope.goods=[{ gname:"iphone8", num:"3", price:"999" },{ gname: "iphone7", num: "4", price: "599" },{ gname: "iphone6", num: "5", price: "499" },{ gname: "iphone5", num: "6", price: "399" } ]; $scope.allSum=function () { var allPrice=0; for(var i=0;i<$scope.goods.length;i++){ allPrice+=$scope.goods[i].price*$scope.goods[i].num; } return allPrice; }; $scope.remove=function  { if{ $scope.goods.splice; } if($scope.goods.length==0){ alter 

所谓的todolist就是把你所做的事情按顺序全部列出来,然后做完一件事,就在这一项之前打勾,此时状态就会变成已完成,todolist可以对所列的事情和已完成的事情删除和修改,当然已完成的事情就不能修改了。当我们拿到一个todolist的时候,首先看到的是todolist的组成,是由一个文本框和,列表项构成,数据要通过控制器从文本框传送到列表项,然后在列表项展示出来。

实现过程:

你的购物车

首先,所有的数据都是存储在localStorage中的;其次,文本框中输入内容后,回车即可添加任务主题;可以按内容和添加时间来排序任务;可以筛选任务,分为未完成和已完成;可以一键删除所有任务;在任务清单前打勾,即表示为已完成;点击任务后面的x则会删除这一条任务;双击任务进入任务编辑模式;在大文本框中填写详细的任务计划;

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

商品名称

澳门威尼斯人平台,(只能在全部任务列表中勾选该任务是否完成哦 0.0...)

 public class ShoppingCar { public string Title { get; set; } public decimal UnitPrice { get; set; } public int Count { get; set; } }

public ActionResult GetCar() { List cars = new List { 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 car) { return Json("ok", JsonRequestBehavior.AllowGet); }

     标题

数量

  My Task List   内容 时间   未完成 已完成 全部   全部展开   删除所有任务       {{task.text}}  × {{task.time}}       未完成:{{count()}}已完成:{{countDone()}}总数:{{taskList.length}}   

var app = angular.module;app.controller('TaskController',function{ //获取缓存中的taskList数据 var tmp = localStorage.getItem; //转为json数据进行操作 $scope.taskList = tmp ? angular.fromJson : []; //新增任务 $scope.addTask = function(){ $scope.taskList.push({ id : $scope.taskList.length + 1, text : $scope.taskText, done : false, time : getNowTime; //此处用来清空文本框中的内容 $scope.taskText = ''; $scope.save(); } //完善任务细则 $scope.addDesc = function; alert; } //还没解决 在未完成和已完成的列表中单击checkbox时,结果不会保存到缓存中去的情况 //从缓存中删除任务 $scope.removeTask = function{ $scope.taskList.splice($scope.taskList.indexOf; $scope.save(); } //从缓存中删除所有任务 $scope.removeAll = function(){ $scope.taskList = []; localStorage.clear(); } //新增任务后还要把任务存入缓存中 $scope.save = function(){ localStorage.setItem('taskList' , angular.toJson; } //获取当前时间 function getNowTime(){ return dateFilter , "yyyy-MM-dd HH:mm:ss"); } $scope.hasTask = function(){ return $scope.taskList.length > 0; } //标记为全部完成 $scope.allDone = function(){ angular.forEach($scope.taskList , function{ task.done = $scope.isAllDone; }); $scope.save(); } //统计已完成的任务 $scope.countDone = function(){ var count = 0; angular.forEach($scope.taskList , function{ count += task.done ? 1 : 0; }); return count; } //统计未完成的任务 $scope.count = function(){ var count = 0; angular.forEach($scope.taskList , function{ count += task.done ? 0 : 1; }); return count; }});${ //给未来元素加双击事件,双击任务显示或隐藏任务细节 $.delegate('li','dblclick',function.find.slideToggle; //全部展开或全部收起 $.click{ var _this = $; if == '全部展开'){ $.slideDown; }else{ $.slideUp; } }); //确认修改描述框后隐藏 $.delegate('.submit','click',function(){ var _this = $.click{ _this.parents.slideUp; //描述框获得焦点又失去焦点后会自动隐藏 $.delegate('.desc','focus',function(){ var _this = $; _this.blur{ _this.parents.slideUp;

单价

单价

到这就大功告成啦, 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

数量

小计

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:Angular达成购物车总结示例代码_AngularJS_脚本之家

关键词: