素材巴巴 > 程序开发 >

认识angular(二)之购物车结算小功能

程序开发 2023-09-08 14:19:41

一、最简单的方式实现购物车结算小功能

 

1.初始化--设置默认单价、数量并计算费用

 

 

在两个input标签里绑定数据

 

 

 

 

2.使用currency格式化费用

 

 

 

但是想要人民币字符,所以传入一个参数

 

 

 

3.优化计算模式 --- 增加sum函数

 

 

调用函数

 

 

视图层与上面并没多大区别

 

 

 

4.增加功能 --- 添加运费计算

在$scope.iphone中初始化运费,并计算总价

 

 

 

 

 

视图改变如下

 

 

5.增加功能 --- 当费用高于100元时免费运费

使用$watch去监听数据(费用)的变化

 

 

 

->

 

 

 

 


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。