zoukankan      html  css  js  c++  java
  • angularjs简单实现购物车需求

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.js"></script>
    <script>
    var myapp=angular.module("myapp",[]);
    var data=[
    {
    done:false,
    name:"小米",
    price:666,
    count:2,

    },
    {
    done:false,
    name:"华为",
    price:888,
    count:1,

    },
    {
    done:false,
    name:"苹果",
    price:299,
    count:5,

    },
    {
    done:false,
    name:"小辣椒",
    price:555,
    count:1,

    },
    {
    done:false,
    name:"坚果",
    price:1999,
    count:5,

    }
    ]

    myapp.controller("myCtrl",function ($scope) {
    $scope.data=data;
    $scope.num=0;

    //实际付款
    $scope.money=function () {
    $scope.numsn=0;

    if( $scope.num>9999)
    {
    $scope.numsn=$scope.num;
    }
    else
    {
    if($scope.numsn!=0)
    {
    $scope.numsn=$scope.num+10;
    }
    }
    return $scope.numsn;

    }
    //判断是否包邮
    $scope.baoyou=function () {
    $scope.nums="";
    if( $scope.num>9999)
    {
    $scope.nums="包邮";
    }
    else
    {
    $scope.nums="十元";
    }
    return $scope.nums;
    }
    //商品总价
    $scope.counts=function () {
    $scope.num=0;
    $scope.n=0;
    for(var i=0;i<$scope.data.length;i++)
    {
    if($scope.data[i].done==true)
    {
    $scope.num+=$scope.data[i].price*$scope.data[i].count;
    $scope.n++;
    }


    }
    /* if($scope.n==$scope.data.length)
    {
    $scope.chec=true;
    }*/

    }
    /*删除*/
    $scope.del=function (name) {
    for(var i=0;i<$scope.data.length;i++) {

    if($scope.data[i].name==name)
    {
    $scope.data.splice(i,1);
    }
    }

    }
    //删除选中的
    $scope.delall=function () {
    for(var i=0;i<$scope.data.length;i++)
    {
    if($scope.data[i].done==true)
    {
    $scope.data.splice(i,1);
    i--;
    }
    }
    }
    //小计
    $scope.xj=function (a,b) {
    $scope.nums=a*$scope.data[b].price;
    $scope.counts();
    return $scope.nums;

    }
    //点击全选
    $scope.checkAll=function () {
    for(var i=0;i<$scope.data.length;i++)
    {
    if($scope.chec==true)
    {
    $scope.data[i].done=true;
    }
    else{
    $scope.data[i].done=false;
    }
    }
    $scope.num=0;
    for(var i=0;i<$scope.data.length;i++)
    {
    if($scope.data[i].done==true)
    {
    $scope.num+=$scope.data[i].price*$scope.data[i].count;

    }
    }
    }
    })
    </script>
    </head>
    <body ng-app="myapp" ng-controller="myCtrl">
    <button ng-click="delall()">删除选中的</button>
    <table border="1" bordercolor="#000000" width="500" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
    <th>全选<span><input type="checkbox" ng-click="checkAll()" ng-model="chec"></span></th>
    <th>商品名称</th>
    <th>单价</th>
    <th>购买数量</th>
    <th>小计</th>
    <th>&nbsp;</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data">
    <td><input type="checkbox" ng-model="item.done" ng-click="counts()"></td>
    <td>{{item.name}}</td>
    <td>{{item.price}}</td>
    <td><input type="number" ng-model="item.count"></td>
    <td>{{xj(item.count,$index)|currency:"RMB"}}</td>
    <td><button ng-click="del(item.name)">删除</button></td>
    </tr>
    </tbody>
    </table>
    <div>商品总价:<span>{{num}}</span></div>
    <div>邮费:<span>{{baoyou()}}</span></div>
    <div>实际付款:<span>{{money()}}</span></div>
    </body>
    </html>

  • 相关阅读:
    实用脚本 2 Linux下定时执行脚本
    SSH原理与运用(一):远程登录
    SSH原理与运用(二):远程操作与端口转发
    注册页面
    注册页面2
    CSS實現網頁漸變背景
    SQL Server Log文件“減肥”方法
    发布一个jquery插件在Web下输入密码时提示大写锁定键
    新增流水号
    ftp图片上传
  • 原文地址:https://www.cnblogs.com/wsq110/p/7681414.html
Copyright © 2011-2022 走看看