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

     

  • 相关阅读:
    uva 11178 Morley&#39;s Theorem(计算几何-点和直线)
    .net web 开发平台- 表单设计器 一(web版)
    Oracle EBS Web ADI 中的术语
    Android学习笔记(十七)——使用意图调用内置应用程序
    PreferenceFragment 使用 小结
    ccMacros
    海量数据查询优化
    c++容器类
    Codeforce 424C Magic Formulas 找规律
    android播放html5视频,仅仅有声音没有图像视频
  • 原文地址:https://www.cnblogs.com/floatboy/p/ng-pice.html
Copyright © 2020-2023  润新知