zoukankan      html  css  js  c++  java
  • 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 "请选择商品!"; }; }]);

     

  • 相关阅读:
    ubuntu下python的错误
    Zookeeper(二) zookeeper集群搭建 与使用
    Zookeeper(一) zookeeper基础使用
    MapReduce(五) mapreduce的shuffle机制 与 Yarn
    MapReduce(四) 典型编程场景(二)
    Mysql(一) 基本操作
    MapReduce(三) 典型场景(一)
    MapReduce(二)常用三大组件
    MapReduce(一) mapreduce基础入门
    Hive(六)hive执行过程实例分析与hive优化策略
  • 原文地址:https://www.cnblogs.com/floatboy/p/ng-pice.html
Copyright © 2011-2022 走看看