Use AngularJS and HTML to do some basic functions of Taobao
Today, implement the following shopping cart with HTML and JS, and then use Angualrjs to implement the front-end implementation of the shopping cart.
Function page analysis:
Since it is imitating the Taobao shopping cart, you must first analyze the Taobao shopping cart page, go to Taobao to sell two things, and see the effect;
First of all, there is a function of selecting all. When selecting all, all the radio boxes will be selected, and all the amounts will be counted.
The radio function of the product store: when selecting a store, all the following products will be selected, and the checked amount will be counted.
Commodity single-selection function: select the commodity and count the amount. If all the commodities are checked, it will trigger the above comprehensive box to be checked, and count all the checked amounts.
Commodity addition and subtraction function, add and subtract the amount of the commodity.
Delete function to remove the product from the shopping cart (if none of the checkboxes are selected, a pop-up window will prompt "No product selected", if all selections are selected, a pop-up window will pop up "Do you want to remove all products", both are small judgments).
If there are no products in the shopping cart, it will appear to go shopping and buy products
This is the general functional requirement, now let's see how the code is implemented:
First of all, there is a guide package in the head part (angular.js, you can also import the package of the route, the thing is used):
<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;
}
}
我的购物车
name
price
number
totalProce
option
{
{user.name}}
{
{user.price | currency:"￥:"}}
{
{user.price*user.number | currency:"￥:"}}
总价为:
您的购物车为空，请先逛
购物车