AngularJs实现简单的购物车
程序员文章站
2024-03-20 13:34:22
...
要想使用angularjs 首先要下载angularjs的库
下载地址：https://angularjs.org/
新手可参考angularjs菜鸟教程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/angular-1.5.8.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCon">
<div class="container">
<h3 class="text-center">书籍价格表</h3>
<table class="table table-hover table-bordered text-center">
<tr>
<td colspan="2">
<input type="text" class="form-control" ng-model="search.$" placeholder="请输入搜索内容">
</td>
<td colspan="2">
<input type="text" class="form-control" ng-model="search.id" placeholder="请输入id">
</td>
<td colspan="2">
<input type="text" class="form-control" ng-model="search.name" placeholder="请输入name">
</td>
</tr>
<tr>
<!-- ng-class="{true:'dropdown',false:'con'}[flag]"-->
<th class="text-center" ng-class="{true:'dropup',false:'dropdown'}[flag]" ng-click="flag = !flag; getOrder('id',flag)">ID <span class="caret"></span></th>
<th class="text-center" ng-class="{true:'dropup',false:'dropdown'}[flag]" ng-click="flag = !flag; getOrder('name',flag)">名称<span class="caret"></span></th>
<th class="text-center" ng-class="{true:'dropup',false:'dropdown'}[flag]" ng-click="flag = !flag; getOrder('price',flag)">单价<span class="caret"></span></th>
<th class="text-center" ng-class="{true:'dropup',false:'dropdown'}[flag]" ng-click="flag = !flag; getOrder('count',flag)">数量<span class="caret"></span></th>
<th class="text-center" ng-class="{true:'dropup',false:'dropdown'}[flag]" ng-click="flag = !flag; getOrder('price*count',flag)">总价<span class="caret"></span></th>
<th class="text-center">操作</th>
</tr>
<tr ng-repeat="book in books | filter : search track by $index">
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.price}}</td>
<td>
<button class="btn btn-primary" ng-click="reduceCount($index)">-</button>
<input class="text-center" type="text" value="{{book.count}}">
<button class="btn btn-primary" ng-click="plusCount($index)">+</button>
</td>
<td>{{book.price * book.count}}</td>
<td><button class="btn btn-danger" ng-click="delItem($index)">删除</button></td>
</tr>
<tr>
<td>总数量</td>
<td>{{getSumCount()}}</td>
<td>总价钱</td>
<td>{{getSumPrice()}}</td>
<td><button class="btn btn-success" ng-click="myShow = !myShow">添加图书</button></td>
<td><button class="btn btn-danger" ng-click="delAll()">全部删除</button></td>
</tr>
</table>
<div ng-show="myShow">
<p class="form-group">
<label class="col-lg-2">id:</label>
<input type="text" ng-model="id" class="form-control col-lg-10">
</p>
<p class="form-group">
<label class="col-lg-2">name:</label>
<input type="text" ng-model="name" class="form-control col-lg-10">
</p>
<p class="form-group">
<label class="col-lg-2">price:</label>
<input type="text" ng-model="price" class="form-control col-lg-10">
</p>
<p class="form-group">
<label class="col-lg-2">count:</label>
<input type="text" ng-model="count" class="form-control col-lg-10">
</p>
<button style="margin-top: 15px" class="btn btn-success pull-right" ng-click="addItem()">确认增加</button>
</div>
</div>
</body>
<script>
angular.module("myApp",[])
.controller("myCon",["$scope","$filter",function ($s,$f) {
$s.books = [
{
"id" : "01",
"name" : "假如给我三天光明",
"price" : 28,
"count" : 10
},
{
"id" : "02",
"name" : "简爱",
"price" : 35,
"count" : 10
},
{
"id" : "03",
"name" : "汤姆索亚历险记",
"price" : 35,
"count" : 30
},
{
"id" : "04",
"name" : "归",
"price" : 35,
"count" : 40
}
]
// $s.myFlag = false;
/*
* 得到总数量
* */
$s.getSumCount = function () {
var sum = 0;
angular.forEach($s.books,function (item,key) {
// console.log(item.count);
sum = sum + item.count;
})
return sum;
}
/*
* 得到总价钱
* */
$s.getSumPrice = function () {
var price = 0;
angular.forEach($s.books,function (item,key) {
price = price + item.price * item.count;
})
return price;
}
/*
* 删除行
* */
$s.delItem = function (index) {
if(confirm("您确定要删除此商品么？")){
$s.books.splice(index,1);
}
}
/*
* 删除全部
* */
$s.delAll = function () {
if($s.books.length != 0){
if(confirm("您确定要删除全部的商品么？")){
$s.books.length = 0;
}
}else{
alert("没有可删除的商品了！");
}
}
/*
* 数量--
* */
$s.reduceCount = function (index) {
if($s.books[index].count <= 0){
$s.books[index].count = 0;
}else{
$s.books[index].count--;
}
}
/*
* s数量++
* */
$s.plusCount = function (index) {
$s.books[index].count++;
}
/*
* 增加一行
* */
$s.addItem = function () {
console.log($s.id);
console.log($s.name);
if ($s.id == "" || $s.name == "" || $s.price == "" || $s.count == ""){
alert("请输入完整的信息！！");
}else{
$s.books.push({"id":$s.id,"name":$s.name,"price":$s.price*1,"count":$s.count*1});
}
console.log($s.books);
$s.id = "";
$s.name = "";
$s.price = "";
$s.count = "";
$s.myShow = false;
}
$s.show = function () {
$s.id = "";
$s.name = "";
$s.price = "";
$s.count = "";
}
/*
* 排序
* */
$s.getOrder = function(val, flag) {
$s.books = $f("orderBy")($s.books, val, flag);
};
}])
</script>
</html>