使用AngularJS和HTML做淘宝的部分基础功能

最新推荐文章于 2022-03-22 21:18:53 发布

未至D增援

最新推荐文章于 2022-03-22 21:18:53 发布

阅读量355

点赞数

本文链接：https://blog.csdn.net/lian895615/article/details/78779088

版权

使用AngularJS和HTML做淘宝的一些基础功能

今天用HTML和JS实现以下购物车，然后再用Angualrjs再去实现一下购物车的前端实现。

功能页面分析：

既然是做模仿淘宝购物车，肯定要先去分析一下淘宝的购物车页面,自己去淘宝卖了两件东西，看了下效果；

首先有一个全选功能，全选的时候会把所有的单选框给选中，并且会把所有的金额进行统计。

商品店铺的单选功能：在选择店铺的时候会把下面的商品全部都给选中，并且统计已经勾选的金额。

商品单选功能：选择该商品，并且统计金额，如果所有的商品都被勾选的话，会触发上面的全面框也被勾选，并且统计所有已经勾选的金额。

商品加减功能，对商品的金额进行加减。

删除功能，把该商品从购物车移出去(如果多选框都没选择的话,就弹窗提示"未选择商品",如果全选了也会弹窗"您是否要移除全部商品",都是一些小型的判断)。

购物车如果没有商品了,就会出现去逛逛,购买商品

这就是大概的功能要求,现在来看看代码如何实现:

首先是head部分的有导包(angular.js,也可以把路由的包也导进去,玩意用到了呢):

[plain] view plain copy

<script src="angular.js"></script>
<script src="angular-route.js"></script>
<style>
th:hover{color: deepskyblue}
</style>

路由部分(路由功能没用到,就是供大家参考):

[plain] view plain copy

<script>
var app = angular.module("myApp",["ngRoute"]);
app.config(["$routeProvider",function ($routeProvider) {
$routeProvider
.when("/one",{
controller:"oneCtrl",
templateUrl:"one.html"
})
.when("/two",{
controller:"twoCtrl",
templateUrl:"two.html"
})
.otherwise({redirectTo:"/one"})
}]);
</script>

这里是主选择器的主要功能:

[plain] view plain copy

app.controller("myCtrl",function ($scope) {
$scope.users = [{
id:1,
state:false,
name:"张三",
price:12.90,
number:2,
totalPrice:25.80
}];
}/* 减数量 */
$scope.jian = function (index) {
if ($scope.users[index].number > 1){
$scope.users[index].number --;
}else{
if(confirm('确定移除此项嘛？')){
$scope.users.splice(index,1);
}
}
}
/* 加数量 */
$scope.jia = function (index) {
$scope.users[index].number ++;
}/* 总价 */
$scope.sum = function () {
var allsum = 0;
for(var i = 0;i<$scope.users.length; i++){
allsum+= $scope.users[i].price*$scope.users[i].number;
}
return allsum;
}/* 删除 */
$scope.deleteAll = function () {
if($scope.checks){
if(confirm('您是否要清空购物车？')){
$scope.users=[];
}
if ($scope.users.length == 0){
alert("没了");
}
}else if($scope.checks==false){
$scope.pan = false;
for(p in $scope.users){
if($scope.users[p].state){
$scope.pan = true;
}
}
if ($scope.pan){
if(confirm('您是否将所选中商品移除购物车？')){
for(var i = 0;i < $scope.users.length;i++){
if($scope.users[i].state){
$scope.users.splice(i,1)
i--;
}
}
}
}else{
alert("您还未选中商品");
}
}
}
/* 单个删除 */
$scope.delete = function (index) {
if(confirm('您是否将该商品移除购物车?')){
$scope.users.splice(index,1);
}
}/* 判断全选 */
$scope.checks = "";
$scope.check = function () {
if($scope.checks){
for(i in $scope.users){
$scope.users[i].state = true;
}
}else{
for(i in $scope.users){
$scope.users[i].state = false;
}
}
}
/* 单选取消,全选也取消 */
$scope.xvan = function (index) {
if($scope.users[index].state == false){
$scope.checks = false;
}
}/* 排序 */
$scope.ji = 0;
$scope.order = "";
$scope.px = function (ji) {
if($scope.ji%2==0){
$scope.order = "price";
$scope.ji++;
}else{
$scope.order = "-price";
$scope.ji++;
}
}
/* 判断数组长度然后显示或隐藏 */
$scope.getSize = function () {
if($scope.users.length > 0){
return false;
}else{
return true;
}
}

看完以上的head部分的操作,应该知道body部分里的部门操作了吧,现在就来看看body部分的布局及一些操作:

[plain] view plain copy

<center>
<div style="width: 1000px">
<h1 style="float: left">我的购物车</h1>
<br><br><br><br>
<hr>
<div ng-hide="getSize()">
<input style="float: left;margin-top: 10px" placeholder="请输入关键字" ng-model="keyword" type="text">
<button style="float: right;background-color: crimson;width: 100px;height: 30px" ng-click="deleteAll()">清空购物车</button>
<br><br>
<table border="2px" width="1000px" cellspacing="0px" cellpadding="10px">
<thead>
<tr>
<th><input ng-model="checks" ng-click="check()" type="checkbox"></th>
<th>name</th>
<th ng-click="px(ji)">price</th>
<th>number</th>
<th>totalProce</th>
<th>option</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter:keyword | orderBy:order">
<th><input ng-model="user.state" ng-click="xvan($index)" type="checkbox"></th>
<td>{{user.name}}</td>
<td>{{user.price | currency:"￥:"}}</td>
<td>
<input style="background-color: deepskyblue;" value="-" ng-click="jian($index)" type="button">
<input style="width: 20px" ng-model="user.number" ng-change="change($index)" type="text">
<input style="background-color: deepskyblue" value="+" ng-click="jia($index)" type="button"></td>
<td>{{user.price*user.number | currency:"￥:"}}</td>
<td><button style="background-color: deepskyblue" ng-click="delete($index)">删除</button></td>
</tr>
<tr>
<td colspan="6">总价为:<span ng-bind="sum()|currency:'￥:'"></span></td>
</tr>
</tbody>
</table>
</div>
<span ng-show="getSize()">您的购物车为空，请先逛<a href="#">购物车</a></span>
</div>
</center>