使用AngularJS和HTML做淘宝的一些基础功能
今天用HTML和JS实现以下购物车，然后再用Angualrjs再去实现一下购物车的前端实现。
功能页面分析：
既然是做模仿淘宝购物车，肯定要先去分析一下淘宝的购物车页面,自己去淘宝卖了两件东西，看了下效果；
首先有一个全选功能，全选的时候会把所有的单选框给选中，并且会把所有的金额进行统计。
商品店铺的单选功能：在选择店铺的时候会把下面的商品全部都给选中，并且统计已经勾选的金额。
商品单选功能：选择该商品，并且统计金额，如果所有的商品都被勾选的话，会触发上面的全面框也被勾选，并且统计所有已经勾选的金额。
商品加减功能，对商品的金额进行加减。
删除功能，把该商品从购物车移出去(如果多选框都没选择的话,就弹窗提示"未选择商品",如果全选了也会弹窗"您是否要移除全部商品",都是一些小型的判断)。
购物车如果没有商品了,就会出现去逛逛,购买商品
这就是大概的功能要求,现在来看看代码如何实现:
首先是head部分的有导包(angular.js,也可以把路由的包也导进去,玩意用到了呢):
<script src="angular.js"></script>
<script src="angular-route.js"></script>
路由部分(路由功能没用到,就是供大家产考):
<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>
这里是主选择器的主要功能:
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部分的布局及一些操作:
我的购物车
name
price
number
totalProce
option
{
{user.name}}
{
{user.price | currency:"￥:"}}
{
{user.price*user.number | currency:"￥:"}}
总价为:
您的购物车为空，请先逛
购物车
这就是body部分的全部布局及操作!
本章只是一个初步的淘宝的基础功能,仅供参考,如果对您有用请留下您的大拇指!!!
祝您成功