zoukankan      html  css  js  c++  java
  • AngularJS写的一个购物车数量加减

    电商网站的购物车加减模块,这里分别用了angularJS 与 jquery 两钟方法实现。

    经常写电商的同学们经常会写上面这样的东西,以前一直用jq写的, 最近在学习angularJS, 刚好看到事件这一块, 于是想到了这个。 上面是用angularJS写的一个模块, 用

    <body>
    <div ng-app="myApp" ng-controller="myCtrl">            
        <span ng-click="count = count + 1">+</span>
        <span>{{ count }}</span>
        <span ng-click="count = count - 1">-</span>
        <br/>            
        <p>
        单价为<i ng-model = 'price'>5</i>
        </p>
        <p>
        总价为 {{count* price}}
        </p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.price = 5;
            $scope.count = 0;
        });
    </script>
    
    </body>

    上面的方法是不是很简单?分分钟满足你的需求;当然,这也可以用jq来写(请原谅我原声js不行)

    $(function() {
    		$("#plus").click(function() {
    			var n = $("#number").val(),
    				num = parseInt(n) + 1;
    			if (num == 0) {
    				alert("cc");
    			}
    			n.val(num);
    		});
    		$("#minis").click(function() {
    			var n = $("#number").val(),
    				num = parseInt(n) - 1;	
    //小于1的时候,默认取值为1 num = num < 1 ? 1 : num; n.val(num); }); });

      

  • 相关阅读:
    Java日期相关操作
    Java中this的功能与作用
    DCL双检查锁机制实现的线程安全的单例模式
    Java 二分查找
    Java冒泡排序
    Java多线程编程(二)
    SSH小结
    Python快速上手JSON指南
    趣谈、浅析CRLF和LF
    linux开发神器--Tmux
  • 原文地址:https://www.cnblogs.com/RoseZhao/p/5009855.html
Copyright © 2011-2022 走看看