千里之行，始于足下
angular.js 基础范例简单购物车
前情提要
上一章，我们做到了基础的界面设计，在本章中，我们将会完成上一章所需的控制器方面的代码。
控制器代码
从服务器获取数据
这里的内容只是讲述基础的前端知识，所以本次介绍将暂时不需要对服务器进行任何操作。
这里我们使用简单的赋值操作即可完成获取数据的操作，这两项变量分别命名为：
- cart
- json
- 原始购物车内容，可以使用cookie类库向cookie索取
- ShopList
- json
- 本页需要的商品列表，可以通过未来需要学习的
$http获取或直接使用jquery的$.post/get获取
基础设定
首先，声明一个模块，这个模块是我们用来处理购物车的，我们称呼他为CartApp,这里和之前在模版中设定的完全一致，其余的变量也都与之前设定的完全一致。
var CartModule = angular.module('CartApp', []);
CartModule.controller('ShopListController',
function($scope,$filter){
// 绑定商品列表到物品列表
$scope.items = ShopList;
// 绑定购物车
$scope.cart = cart;
// 设定详细页面对应购买默认个数
$scope.mount = 1;
// 初始化详细列表
$scope.detail = {};
// 设定详细列表显示为否
$scope.shopDetail=false;
}
);这里和之前略有不同的是我们的控制器的参数列表中多了一个filter，这里是一个新的知识点是关于过滤器的知识，我们稍后在做解释。
各个方法实现
我们先翻一下笔记，之前我们有记录的所有方法:
- $scope.showDetail()
- 无参数
- 这个方法用来控制详情页面是否显示
- $scope.bt()
- 无参数
- 此方法用来控制购物车列表的高度，此高度将由购物列表的数目大小决定
- $scope.addItemIntoCart()
- 无参数
- 此方法用来向购物车添加商品，商品内容有详情列表决定，（或通过参数决定-下一章解决）
好操作就这么多了我们来一一实现：
$scope.showDetail = function(item) {
$scope.shopDetail=true;
// 克隆detail
$scope.detail=JSON.parse(JSON.stringify( item ));
};这里值得注意，我们不希望在这里的对象实现双向绑定，姑且猜测所有的angular对象操作都是通过回调和原型继承的方法来获取数值和操作的，那么这里直接使用item会使得item的原型被继承，我们只是需要数据，而不希望双向绑定，so应该将其克隆一遍
$scope.bt = function(){
var bt_long=$filter('jsonlenght')($scope.cart["items"]);
return {"height": 11.075*bt_long +"rem"};
}这里需要讲述一个新的概念，过滤器，在许多的后台框架中都使用了许多类似的方法，比如thinkphp的{xxx|html_trap}
这里也是一样的你完全可以用一样的方法使用过滤器，同时angular也允许你加入自己的过滤器语法如下：
XXXModule.filter(‘filtername’,function(){ return function });
这没有什么难度，我们之间演示实例就能明白了
Tips:值得注意的是假如你不是在页面中使用过滤器，那么请一定要将$filter加入控制器的参数中来使用
CartModule.filter('jsonlenght',function(){
var jsonlenghtFilter = function(input){
var jsonLength = 0;
for(var item in input){
jsonLength++;
}
return jsonLength;
}
return jsonlenghtFilter;
});这里我们需要构建一个用来返回json数组长度的过滤器，input是指输入的内容，我们最后返回了jsonlenghtFilter
$scope.addItemIntoCart = function() {
var find=false;
$.each($scope.cart['items'], function(i, cartitem){
if(cartitem.id==$scope.detail.id){
cartitem['mount']=cartitem.mount+$scope.mount;
find=true;
}
});
if(!find){
$scope.cart['items'][$scope.detail.id]=JSON.parse(JSON.stringify( $scope.detail ));
$scope.cart['items'][$scope.detail.id]['from']=$scope.detail['from']['id'];
}
};这个是最后一个方法，由于之前忘记在视图页面中添加一键购买，so，我这里没有按照id添加的方法。
就这样第三篇内容完成了，现在你可以把这个js加入html文件运行一下，你可以自由的添加购物车内容，显示详情，这一阶段的工作已经完成了
写在最后
下一篇 我将会继续后面第二个页面的学习，第一个页面的控制器编写已经结束了（触类旁通的学习，剩余的所有功能比如删除购物车内容等等都可以简单使用json数组的方法解决），千里之行始于足下，我希望一步步下去能脚踏实地的学会angular.js
在下一篇中，我将会使用到实际的服务器来进行数据的传输（其实这是不合理的创建一个服务器测试数据并没有什么意义，通常angular通过单元测试后才需要拿实打实的数据测试一下，这样更加节省时间），同时在下一篇中我将会学习简单的关于路由功能，服务和指令，敬请期待下一篇 angular 第四章 一个简单的购物车范例(3)
本文标题：[angular.js]第三章 一个简单的购物车范例(2)
永久链接：https://iceprosurface.com/2016/03/01/2016/2016-03-01-angular-3rd/
作者授权：本文由 icepro 原创编译并授权刊载发布。
版权声明：本文使用「署名-非商业性使用-相同方式共享 4.0 国际」创作共享协议，转载或使用请遵守署名协议。