基于购物车更改完整http请求数据改变代码--首页与主要代码

来源：互联网发布：js this 作用域编辑：程序博客网时间：2024/06/04 17:44

//主要代码

<!DOCTYPE html><html ng-app="BShop"><head >    <meta charset="UTF-8">    <!--必写的一句话-->    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">    <!--应用css文件-->    <link href="css/css.css" rel="stylesheet">    <link href="ionic-v1.3.3/css/ionic.css" rel="stylesheet">    <script type="text/javascript" src="ionic-v1.3.3/js/ionic.bundle.js"></script>    <title></title>    <script type="text/javascript">        var BShop = angular.module("BShop", ["ionic"]);        BShop.config(function($stateProvider,$urlRouterProvider){            $stateProvider.state("home",{                //路径                url:"/home",                views:{                    "view-home":{                        templateUrl:"home/home.html",                        controller:"HomeCtrl"                    }                }            }).state("cart",{                url:"/cart",                views:{                    "view-cart":{                        templateUrl:"cart/cart.html"                    }                }            }).state("mine",{                url:"/mine",                views:{                    "view-mine":{                        templateUrl:"mine/mine.html"                    }                }            });            $urlRouterProvider.otherwise("home");        });        BShop.controller("HomeCtrl", function ($scope, $ionicSideMenuDelegate,$http) {            $scope.toggleLeft = function () {                //侧滑                $ionicSideMenuDelegate.toggleLeft();            }            $scope.book_list = [];            //为路径定义一个数组            var urls = [                    "",                "book_list_1.json", // pageNo: 1                "book_list_2.json", // pageNo: 2                "book_list_3.json"  // pageNo: 3            ];            //定义页数默认为第一页            var page = 1;            //刷新方法            var loadData = function(){                //获取路径(第一页)                var httpReq = $http.get(urls[page]);                httpReq.success(function(data){                    $scope.book_list = $scope.book_list.concat(data);                }).error(function(data,status){                    console.log(status)                }).finally(function(){                   $scope.$broadcast('scroll.infiniteScrollComplete');                });            };            loadData();            //上拉刷新            $scope.doRefresh=function(){                $scope.book_list = [];                page = 1;                loadData();            };            //下拉加载            $scope.loadMore = function(){                if(page++>3)                {                    page=3;                    return;                }                loadData();            };        });    </script></head><body><!--最上面的title--><ion-nav-bar></ion-nav-bar><!--侧滑页面--><ion-side-menus>    <ion-pane ion-side-menu-content>        <ion-nav-bar class="bar-stable nav-title-slide-ios"></ion-nav-bar>        <!--首页内容-->        <ion-nav-view animation="slide-left-right">            <ion-nav-view name="view-home"></ion-nav-view>        </ion-nav-view>    </ion-pane>    <!--左侧菜单-->    <ion-side-menu side="left" class="mine">        <header class="bar bar-header bar-stable">            <h1 class="title">个人中心</h1>        </header>        <ion-content class="has-header">            <div class="avatar">                <img src="img/mine_avatar.jpg" width="80px" height="80px"/>                <p>姓名</p>            </div>            <div class="list">                <a class="item item-icon-left item-icon-right">                    <i class="icon ion-clipboard"></i>                    我的订单                    <i class="icon ion-ios-arrow-right"></i>                </a>                <a class="item item-icon-left item-icon-right">                    <i class="icon ion-star"></i>                    我的收藏                    <i class="icon ion-ios-arrow-right"></i>                </a>                <a class="item item-icon-left item-icon-right">                    <i class="icon ion-gear-a"></i>                    设置                    <i class="icon ion-ios-arrow-right"></i>                </a>            </div>        </ion-content>    </ion-side-menu></ion-side-menus><!--路由选项卡--><!--底部视图--><ion-tabs class="tabs-positive tabs-icon-top">    <ion-tab title="首页" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline" ui-sref="home">        <!--<ion-nav-view name="view-home"></ion-nav-view>-->    </ion-tab>    <ion-tab title="购物车" icon-on="ion-ios-cart" icon-off="ion-ios-cart-outline" ui-sref="cart">        <ion-nav-view name="view-cart"></ion-nav-view>    </ion-tab>    <ion-tab title="我的" icon-on="ion-ios-person" icon-off="ion-ios-person-outline" ui-sref="mine">        <ion-nav-view name="view-mine"></ion-nav-view>    </ion-tab></ion-tabs></body></html>

//首页页面

<ion-view title="首页" class="home" ng-controller="HomeCtrl">    <header class="bar">        <h1 class="title">首页</h1>    </header>    <!--最左侧的侧拉按钮-->    <ion-nav-buttons side="left">        <button class="button button-icon ion-ios-more"                ng-click="toggleLeft()"></button>    </ion-nav-buttons>    <!--内容列表--><ion-content>    <!--下拉刷新-->    <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>    <ion-list>        <ion-item ng-repeat="book in book_list">            <div class="picture">                <img src="{{book.picture}}" width="128px" height="128px">            </div>            <div class="details">                <h2>{{book.title}}</h2>                <h3>{{book.description}}</h3>                <div>                    <span>{{book.price | currency:"￥"}}</span>                    <i class="icon ion-ios-cart"></i>                </div>            </div>        </ion-item>    </ion-list>    <!--加载更多-->    <ion-infinite-scroll on-infinite="loadMore()" distance="1%" immediate-check="false"></ion-infinite-scroll></ion-content></ion-view>

阅读全文

0 0

基于购物车更改 完整http请求数据 改变代码--首页与主要代码

基于购物车更改完整http请求数据改变代码--首页与主要代码