购物加减与全部选中

最新推荐文章于 2019-05-26 15:29:07 发布
gh323093
最新推荐文章于 2019-05-26 15:29:07 发布
阅读量241
点赞数
分类专栏： Web前端
本文链接：https://blog.csdn.net/gh323093/article/details/78595573
版权
Web前端专栏收录该内容
56 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../ionic_jiabao/css/ionic.css" rel="stylesheet">
    <script src="../ionic_jiabao/js/ionic.bundle.js"></script>
    <script>
        angular.module("myapp",["ionic"])
            .controller("democ", function ($scope) {
                $scope.goods=[{
                    id:1,
                    img:"img/1.jpg",
                    title:"拍照手机",
                    price:999,
                    num:1,
                    state:false
                },{
                    id:2,
                    img:"img/2.jpg",
                    title:"联想照相机",
                    price:1500,
                    num:1,
                    state:false
                },{
                    id:3,
                    img:"img/3.jpg",
                    title:"SONY照相机",
                    price:1290,
                    num:1,
                    state:false
                }];
                //计算总数量
                $scope.count=function () {
                    var i=0;
                    for (g in $scope.goods){
                        if ($scope.goods[g].state){
                            i=i+$scope.goods[g].num;
                        }
                    }
                    return i;
                }
                //计算总价方法
                $scope.sumPrice=function () {
                    var sum=0;//总价
                    for (g in $scope.goods){
                        if ($scope.goods[g].state){
                            sum = sum+($scope.goods[g].price * $scope.goods[g].num);
                        }
                    }
                    return sum;
                }
                //按钮 +号添加商品数量
                $scope.more = function (good) {
                    good.num = good.num + 1;
                }
                //按钮 -号减少商品数量
                $scope.less = function (good) {
                    if (good.num<=1){
                        //直接将商品从数组中移除
                        for (var i=0;i<$scope.goods.length;i++){
                            if ($scope.goods[i].id == good.id){
                                $scope.goods.splice(i, 1);
                            }
                        }
                    } else {
                        good.num = good.num - 1;
                    }
                }
                //直接删除该商品
                $scope.del = function (good) {
                    for(var i=0;i<$scope.goods.length;i++){
                        if ($scope.goods[i].id==good.id){
                            $scope.goods.splice(i,1);//将商品从购物车中移除
                        }
                    }
                }
                //全部选中/全部取消
                $scope.ckAll = function () {
                    var b = $scope.isck;
                    for (var i=0;i<$scope.goods.length;i++){
                        $scope.goods[i].state = b;//选择改变状态
                    }
                }
            })
    </script>
</head>
<body ng-app="myapp" ng-controller="democ">
<div class="content">
    <ul class="list">
        <li class="item" ng-repeat="good in goods">
            <input type="checkbox" ng-model="good.state">
            <img src={{good.img}} style="width: 100px; height: 80px"/>
            <h3>{{good.title}}</h3>
            <span>{{good.price|currency:"￥:"}}</span>
            <button ng-click="less(good)">-</button>&nbsp;&nbsp;{{good.num}}
            &nbsp;&nbsp;<button ng-click="more(good)">+</button>
            <button ng-click="del(good)">删除</button>
        </li>
    </ul>
</div>
<div>
    <input type="checkbox" ng-model="isck" ng-click="ckAll()" style="margin-left: 10px">全选
    &nbsp;&nbsp;合计￥:<span ng-bind="sumPrice()"></span>&nbsp;&nbsp;总计￥:<span ng-bind="count()"></span>
    &nbsp;&nbsp;<button class="button-dark">结算</button>
</div>
</body>
</html>


//第二个查找月份
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <!--<script src="../ionic/shop/shop/0755116074909/js/app.js"></script>-->
    <style>
        *{
            margin-top: 8px;
            text-align: center;
        }
        table{
            border-collapse: collapse;
            margin: 20px auto;
        }
        th,td{
            padding: 10px;
            border: 1px solid #000000;
        }
    </style>
    <script>
        var myapp = angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.data=[{
                id:1,
                name:"张龙象",
                age:"29",
                sex:"男",
                date:"1488927457128"
            },{
                id:2,
                name:"方云",
                age:"19",
                sex:"男",
                date:"1508927457128"
            },{
                id:3,
                name:"颜域空",
                age:"23",
                sex:"男",
                date:"1488927457128"
            },{
                id:4,
                name:"姬守愚",
                age:"24",
                sex:"男",
                date:"1508927457128"
            }];
            //变成时间戳的方法
//            var str = '2017/10/25';
//            //str = str.replace(/-/g,'/');
//            var date = new Date(str);
//            var time = date.getTime();
//            console.log(time);
            $scope.month1="--开始月份--";
            $scope.month2="--结束月份--";
            $scope.filt=function (item) {
                //return false;
                if ($scope.month1!="--开始月份--"&&$scope.month2!="--结束月份--"){
                    if (parseInt($scope.month1)>parseInt($scope.month2)){
                        alert("选择错误");
                    } else {
                        console.log("过滤");
                        var str1="2017/"+$scope.month1+"/01";
                        $scope.time1=new Date(str1).getTime();
                        var str2="2017/"+(parseInt($scope.month2)+1)+"/01";
                        $scope.time2=new Date(str2).getTime();
                        if(item.date<$scope.time1||item.date>=$scope.time2){
                            return false;
                        }else{
                            return true;
                        }
                    };
                } else {
                    return true;
                }
            };
            //排序
            $scope.sortColumn-"id";
            $scope.revers=false;
            $scope.sort=function (column) {
                //console.log(column)
                if ($scope.sortColumn==column){
                    $scope.revers=!$scope.revers;
                }
                $scope.sortColumn=column;
            }
            //添加内容
            $scope.add=function () {
                console.log(0);
                $scope.data.push({
                    id:$scope.data.length+1,
                    name:$scope.name,
                    age:$scope.age,
                    sex:$scope.sex,
                    date:new Date()*1
                });
            };
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<span>按时间搜索</span>
<select ng-model="month1">
    <option>--开始月份--</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select>
<select ng-model="month2">
    <option>--结束月份--</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select>
<table>
    <thead>
    <tr>
        <th ng-click="sort('id')">序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th ng-click="sort('data')">时间</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data|filter:filt|orderBy:sortColumn:revers">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.date|date:"MM-dd hh:mm"}}</td>
    </tr>
    </tbody>
</table>
<span style="font-size: 20px; font-weight: bold">添加新内容</span>
<table>
    <tr>
        <td>姓名</td>
        <td><input type="text" ng-model="name"></td>
    </tr>
    <tr>
        <td>年龄</td>
        <td><input type="text" ng-model="age"></td>
    </tr>
    <tr>
        <td>性别</td>
        <td><input type="text" ng-model="sex"></td>
    </tr>
    <tr>
        <td colspan="2"><button ng-click="add()">按钮</button></td>
    </tr>
</table>
</body>
</html>
gh323093
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物加减与全部选中

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> link href="../ionic_jiabao/css/ionic.css" rel="stylesheet"> script src="../ionic_jiabao/js/ionic.bundle.js">script>
复制链接

扫一扫