您的位置：首页 > Web前端 > AngularJS

AangularJS运用bootstrap.js结合创建购物表单

2017-09-17 21:43 435 查看

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title> 购物</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

//导入这三个js使用

<script src="jss/jquery-3.2.1.js"></script>

<script src="jss/bootstrap.min.js"></script>

<script src="jss/angular1.4.6.min.js"></script>

<style>

span{padding-left:50px;padding-right:50px;}

</style>
<script>

//angular 在最跟处创建ng-app 和controller 相当于确定控制的入口

var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){

//创建要显示的集合

$scope.shopList=[

{ name:'显卡',price:'80.90',num:10},

{ name:'读卡器',price:'20.40',num:10},

{ name:'键盘',price:'46.90',num:10},

{ name:'显示器',price:'231.00',num:10},

{ name:'主机',price:'279.30',num:10}

];

//点击对应的button减少数量

$scope.reduce= function (index) {

if($scope.shopList[index].num>1){

$scope.shopList[index].num--;

}else{

$scope.remove(index);

}

};

//点击对应的button增加数量

$scope.add=function(index){

$scope.shopList[index].num++;

};

//计算总价

$scope.allSum=function(){

var allPrice = 0;

for(var i= 0;i<$scope.shopList.length;i++){

allPrice+=$scope.shopList[i].price*$scope.shopList[i].num;

}

return allPrice;

};

//计算总数量

$scope.allNum=function(){

var allShu=0;

for(var i=0;i<$scope.shopList.length;i++){

allShu+=$scope.shopList[i].num;

}

return allShu;

};

//点击移除button 弹出是否移除

$scope.remove=function(index){

if(confirm('确定移吗？')){

$scope.shopList.splice(index,1);

}

};

//使得输入框中不得小于等于0 让它最小的为1

$scope.change=function(index){

if($scope.shopList[index].num>=1){

}else{

$scope.shopList[index].num=1;

}

};

//清空购物车点击清空按钮弹出是否清空

$scope.removeAll=function(){

if(confirm('确定清空购物车')){

$scope.shopList=[];

}

}

});

</script>
</head>

//通常可以直接在 body里面创建ng-app和ng-controller 这里我就把controller放入下边盒子里了

<body ng-app="myApp">

<div class="container">

<div ng-controller="myCtrl">

<ul class="list-group">

<li ng-repeat="shop in shopList" class="list-group-item">

<span>{{shop.name}}</span>

<span>{{shop.price|currency}}</span>

<span>

<button ng-click="reduce($index)">-</button>

<input type="text" placeholder="请输入大于0的数" ng-model="shop.num" ng-change="change($index)">

<button ng-click="add($index)">+</button>

</span>

<span>{{shop.price*shop.num}}</span>

<button class="btn btn-primary btn-xs" ng-click="remove($index)">移除</button>

</li>

</ul>

总价：<span ng-bind="allSum()"><
4000
/span> 总数：<span ng-bind="allNum()"></span>

<button class="btn btn-warning "ng-click="removeAll()">清空购物车</button>

</div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航