?????????

WEB前端 waitig 520℃ 百度已收录 0评论
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="lib/css/ionic.css" />
        <script src="lib/js/ionic.bundle.js"></script>
        <style>
            body {
                width: 800px;
                margin: 0 auto;
            }

            ul: {
                float: left;
            }

            #content {
                width: 600px;
                background-color: red;
                float: right;
            }
        </style>
        <script>
            angular.module("myapp", ["ionic"])
                .config(function($stateProvider) {
                    $stateProvider
                        .state("state1", {
                            url: "/index",
                            templateUrl: "views/index.html"
                        })
                        .state("state2", {
                            url: "/tocart", //?????? ????????????????????????    href="#/cart"
                            templateUrl: "views/cart.html"
                        })

                })
                .controller("dataCtrl", function($scope, $http, $filter, $state) {
                    //????????????????????? state1
                    $state.go("state1");

                    //????????????  ,?????????json????????????
                    var datagoods;
                    $scope.count = 0; //?????????
                    $scope.sumprice = 0; //??????
                    $scope.goodCart = []; //???????????? ,????????????

                    $http.get("datas.json").success(function(resp) {

                        console.log("????????????????????????,", resp); //resp ????????????
                        $scope.goods = resp;
                        datagoods = resp;

                    })
                    //????????????,???????????????????????????
                    $scope.selData = function(t) {
                        $f = $filter("filter"); //?????????$filter?????????????????????????????? ?????????
                        $scope.goods = $f(datagoods, {
                            "type": t
                        });
                    }
                    $scope.goCart = function(i) { //i ????????????????????????
                        //???????????????????????????
                        var good = $scope.goods[i];
                        console.log("????????????", good.price);
                        $scope.sumprice = $scope.sumprice + good.price;
                        $scope.count = $scope.count + 1;

                        /*
                         * ?????????????????????????????????????????????addCart 
                         */
                        addCart(good);

                    }
                    //??????????????????????????? ????????????
                    addCart = function(good) {
                        // [{"good":{"proname","??????","price":10},"num":1},{"good":good,"num":1}]  ??????????????????
                        var b = false; //b=true,???  b=false ??????   b???????????????????????????????????????????????????

                            //???????????????,?????? ??????good?????????
                            for(var i = 0; i < $scope.goodCart.length; i++) {
                                if($scope.goodCart[i].good == good) {
                                    $scope.goodCart[i].num = $scope.goodCart[i].num + 1;
                                    b = true;
                                    return;
                                }
                            }
                            if(b == false) {
                                $scope.goodCart.push({
                                    "good": good,
                                    "num": 1
                                });
                            }
                    }


                    $scope.del=function(index){
                        //?????????????????????????????????
                      var gcart=    $scope.goodCart[index];
                      gcart.num=gcart.num-1;
                      //????????????????????? ?????? ??????0
                      if(gcart.num==0){
                        $scope.goodCart.splice(index,1);//index:??????????????????,  1 ??????1???
                      }

                     //?????? ?????????
                     $scope.count = $scope.count-1; //?????????
                     $scope.sumprice = $scope.sumprice-gcart.good.price; //??????

                    }


                })
        </script>
    </head>

    <body ng-app="myapp" ng-controller="dataCtrl">
        <ion-header-bar align-title="right" class="bar-positive">
            <a class="button" href="#/index">????????????</a>
            <h1 class="title">???????????????:{{count}} {{sumprice|currency:"RMB ???"}} </h1>
            <div class="buttons">
                <a class="button" href="#/tocart">??????</a>
            </div>
        </ion-header-bar>
        <br /><br /><br />
        <div ui-view></div>
    </body>

</html>
        <ul>
            <li><button class="button button-light" style="width: 200px;" ng-click="selData('')">??????</button> </li>
            <li><button class="button button-light" style="width: 200px;" ng-click="selData('??????')">??????</button> </li>
            <li><button class="button button-light" style="width: 200px;" ng-click="selData('??????')">??????</button> </li>
        </ul>
        <div id="content">
            <!-- ionic ??????????????? -->
            <ul class="list">
                <li class="item" ng-repeat="g in goods">
                    <h3> {{g.proname}}</h3>
                    <img src="img/y.jpg" width="160px" />
                    <button class="button button-calm" style="float: right;"  ng-click="goCart($index)">???????????????</button>
                    <span style="float: right;">{{g.price|currency:"RMB ???"}}</span>
                </li>
            </ul>
        </div>
<div class="alert alert-warning" ng-show="goodCart.length==0">
        ???????????????????????????<a href="#/index" class="alert-link">????????????</a>
</div>
<table ng-hide="goodCart.length==0">
    <tr>
        <th>??????</th>
        <th>????????????</th>
        <th>??????</th>
        <th>??????</th>
    </tr>
    <tr ng-repeat="c in goodCart ">
            <td>{{c.num}}</td>
            <td>{{c.good.proname}}</td>
            <td>{{c.good.price}}</td>
            <td>{{c.good.price * c.num|currency:"RMB ???"}}
             <button class="button-small" ng-click="del($index)">??????</button>

            </td>
    </tr>

</table>

本文由【waitig】发表在等英博客
本文固定链接:?????????
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)