记录我工作学习生活中的点点滴滴......

AngularJS学习笔记 - 购物车的实例(2)
发布于 AngularJS
2014-07-01 10:07:32
5814
1

最近终于是感觉有些空余时间了,都是琐碎的正好用来写blog,希望不再是月更吧。

这篇是从上一篇日志扩展而来,写上篇《AngularJS学习笔记 - 购物车的实例》的时候刚刚接触AngularJS,后面一些特性都还不知道,把买来的书先翻了一下,对于AngularJS有了整体的印象,因此,上一次写的购物车的实例可以继续优化了。

这次优化主要是增肌唉一个输入框更方便的修改数量,然后使用$watch来监控数量变化,这样可以动态的更改总价,这恰恰是上篇末尾提出的疑问,通过进一步的学习完美的解决了。

整体界面如下:(上传图片给加上了,终于不再是枯燥的文字了

主要的操作就是修改数量和删除整个商品,修改数量有两个按钮可以快捷的进行增加删除操作,也可以直接在输入框中填写数量,删除则是把这个商品整个移除,当商品数量为0的时候继续点-号也是删除操作。

下面分享我的代码,还是分为html和js两部分。

html部分

<h1>Shop Cart</h1>
<table border="1" style="width:800px" ng-controller = "CartController">
    <tr>
        <td>商品名称</td>
        <td>价格</td>
        <td>数量</td>
        <td>总价</td>
        <td>操作</td>
    </tr>
    <tr ng-repeat = "item in items">
        <td>{{item.title}}</td>
        <td>{{item.price|currency}}</td>
        <td>
            <input type = "button" ng-click = "change($index,-1)" value="-"/>
            <input type = "text" ng-model="item.num" style="width:30px"/>
            <input type = "button" ng-click = "change($index,1)" value="+"/>
        </td>
        <td>{{item.num*item.price|currency}}</td>
        <td>
            <input type = "button" ng-click = "remove($index)" value="删除"/>
        </td>
    </tr>
    <tr>
        <td colspan="3" style="text-align:right">合计</td>
        <td  colspan="2">{{getTotal() | currency}}</td>
    </tr>
</table>

js部分

<script type = "text/javascript">
    function CartController($scope){
        $scope.items=[
            {title:'good1','price':'3.10','num':10},
            {title:'iphone5s','price':'153.10','num':3},
            {title:'ipad','price':'2153.10','num':1}
        ];
        $scope.getTotal=function(){
            var total=0;
            for(var i in $scope.items){
                if ($scope.items[i].num>0){
                    total+=$scope.items[i].price*$scope.items[i].num
                }
            }
            return total;
        };
        $scope.remove=function(index){
            $scope.items.splice(index,1);
        };
        $scope.change=function(index,num){
            if ($scope.items[index].num==0 && num==-1){
                $scope.remove(index)
            }else{
                $scope.items[index].num+=num
            }
        };
        $scope.$watch($scope.items,$scope.getTotal);
    }
</script>




分享本文到:
除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:Pakey's BLog >>AngularJS >>AngularJS学习笔记 - 购物车的实例(2)
本文地址:http://www.pakey.net/blog/angular-shopcart-2.html