• angularjs购物车效果


    用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 "请选择商品!"; }; }]);

     

  • 相关阅读:
    mysql 权限问题
    触发器作用
    带有循环功能的存储过程
    带有条件判断的存储过程
    数据存储 三大范式-----------待续
    存储过程自 带条件判断的存储过程
    线程异步更新UI
    TextBox只能输入数字
    C#中无边框窗体移动或拖控件移动窗体
    classloader原理
  • 原文地址:https://www.cnblogs.com/floatboy/p/ng-pice.html
Copyright © 2020-2023  润新知