<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="personCtrl" data-ng-app="" data-ng-init="quantity=1;price=5">
<h2>价格计算器</h2>
数量:<button ng-click="toggle();" >－</button> <input type="number" ng-change="toggles()" ng-model="quantity"><button ng-click="quantity = quantity + 1">加</button>
价格: <input type="number" ng-model="price">
<p><b>总价:</b> {{quantity * price}}</p>
</div><script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.toggle = function() {
if($scope.quantity>1) $scope.quantity =$scope.quantity - 1;
};
$scope.toggles = function() {
if($scope.quantity<0 || isNaN($scope.quantity)) $scope.quantity =1;
};
});
</script>
</body>
</html>
Article Detail
AngularJS购物车商品数量加减价格实时变化代码
价格计算器 数量: － 加 价格: 总价: {{quantity * price}} var app = angular.module('myApp', [])...
js有个函数 isNaN(val)//如果是数字则返回 false
使用时候