angularjs购物车效果

浏览数：25 / 时间：2015年06月09日

用angularjs写了一个购物车效果中。

html代码：

<div png-app="myAp" ng-controller="conTroll">
            <h3>
                您选中了{{getLen()}}个商品
            </h3>
            <ul>
                {{setHtml()}}
                <li ng-repeat="item in youso">
                    <span>商品:{{item.youName}}，</span>
                    <input type="button"  value="-"ng-click = "dudectNum($index)"/>
                    <input type="text" ng-model="item.count" readonly />    
                    <input type="button" ng-click = "addNum($index)" value="+" />
                    <span>单价：${{item.pice}}，</span>
                    <span>总价格：${{item.count*item.pice}}</span>
                    <button ng-click="rest($index)">重置</button>
                    <button ng-click="remove($index)">移除商品</button>
                </li>

            </ul>        
        </div>

js代码：

var myApp = angular.module("myApp",[])
        .controller("conTroll",["$scope",function (scope){
                //商品基本信息
                var youso = [
                    {
                        youName:"上衣",
                        pice:"20",
                        count:1
                    },
                    {
                        youName:"裤子",
                        pice:"50",
                        count:1
                    },
                    {
                        youName:"帽子",
                        pice:"100",
                        count:1
                    }
                ];


                scope.youso = youso;

                //计算选中的商品个数
                scope.getLen = function (){
                    return youso.length;    
                };
                //重置
                scope.rest = function (index){
                    scope.youso[index].count = 1;
                };
                //删除
                scope.remove = function (index){
                    scope.youso.splice(index,1);    
                };
                //加法
                scope.addNum = function (index){
                    scope.youso[index].count++;    
                };
                //减法
                scope.dudectNum = function (index){
                    if(scope.youso[index].count<= 0) scope.youso[index].count = 0;
                    else scope.youso[index].count--;    
                };
　　　　　　　　　//没有物品时提醒选择
                scope.setHtml = function (){
                    if(!scope.youso.length)    return "请选择商品！";
                };

        }]);