AngularJS写的一个购物车数量加减

最新推荐文章于 2021-03-19 01:37:17 发布

auh2786

最新推荐文章于 2021-03-19 01:37:17 发布

阅读量164

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/RoseZhao/p/5009855.html

版权

电商网站的购物车加减模块，这里分别用了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);
		});
	});

转载于:https://www.cnblogs.com/RoseZhao/p/5009855.html

auh2786

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS写的一个购物车数量加减

电商网站的购物车加减模块，这里分别用了angularJS 与 jquery 两钟方法实现。经常写电商的同学们经常会写上面这样的东西，以前一直用jq写的，最近在学习angularJS, 刚好看到事件这一块，于是想到了这个。上面是用angularJS写的一个模块，用<body><div ng-app="myApp" ng-controller="...
复制链接

扫一扫