完整的Ionic项目实例

<ion-view title="{{::brand.brand_detail[0].word||'品牌详情'}}" class="product brand" ng-switch on="productShow"> <ion-nav-buttons side="left"> <a class="button button-icon ion-ios-arrow-back" ng-click="toClose()"></a> </ion-nav-buttons> <ion-nav-buttons side="right"> <button class="button button-icon icon ion-android-share-alt" ng-disabled="!brand" ng-click="share()"></button> </ion-nav-buttons> <div class="bar bar-subheader btabs"> <div class="directory"> <a ng-class="{'bt-active':productShow==1||!productShow}" ng-click="showProduct(1)">综述</a> <a ng-class="{'bt-active':productShow==2}" ng-click="showProduct(2)">产品</a> <a ng-class="{'bt-active':productShow==3}" ng-click="showProduct(3)">经销商</a> <a ng-class="{'bt-active':productShow==4}" ng-click="showProduct(4)">论坛</a> <a ng-class="{'bt-active':productShow==5}" ng-click="showProduct(5)">口碑</a> <a ng-class="{'bt-active':productShow==6}" ng-click="showProduct(6)">资讯</a> <!--<a ng-class="{'bt-active':productShow==7}" ng-click="showProduct(7)">视频</a>--> </div> </div> <ion-content class="has-subheader" ng-switch-default lazy-scroll> <!--<div class="show"> <div><h3><div class="title">品牌简介</div><div class="more"><a ng-click="showInfo()" class="button button-icon">更多<i class="ion-ios-arrow-right"></i></a></div></h3></div> <div ng-bind-html="::brand.brand_detail[0].memo" class="medium"></div> <div class="specific"> <p ng-if="::brand.brand_detail[0].ppkeyword"><i>品牌荣誉：</i><span>{{::brand.brand_detail[0].ppkeyword}} </span> </p> <p ng-if="::brand.brand_detail[0].ppggc"><i>品牌口号：</i><span>{{::brand.brand_detail[0].ppggc}} </span> </p> <p ng-if="::brand.brand_detail[0].linkwz"><i>网&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：</i><span>{{::brand.brand_detail[0].linkwz}} </span> </p> <div class="expert"> <p ng-if="::brand.brand_detail[0].pptel"><a href="tel:{{::brand.brand_detail[0].pptel}}">专&nbsp;&nbsp;线&nbsp;&nbsp;1：<b>{{::brand.brand_detail[0].pptel}}</b></a></p> <p ng-if="::brand.brand_detail[0].pptel2"><a href="tel:{{::brand.brand_detail[0].pptel2}}">专&nbsp;&nbsp;线&nbsp;&nbsp;2：<b>{{::brand.brand_detail[0].pptel2}}</b></a></p> <p ng-if="::brand.brand_detail[0].pptel3"><a href="tel:{{::brand.brand_detail[0].pptel3}}">专&nbsp;&nbsp;线&nbsp;&nbsp;3：<b>{{::brand.brand_detail[0].pptel3}}</b></a></p> </div> </div> </div> </div>--> <div class="show"> <div><h3><div class="title">产品展示</div><div class="more"><a ng-click="showProduct(2)" class="button button-icon">更多<i class="ion-ios-arrow-right"></i></a></div></h3></div> <div class="share"> <div class="list"> <a class="item item-thumbnail-left" href="#product/{{::product.ID}}" ng-repeat="product in ::brand.brand_product"> <div class="left"><img image-lazy-src="{{::product.Pic|imgFilter:root.productUrl}}" class="dfimg2"></div> <div class="right"><h2>{{::product.productname}}</h2> <p class="introduction">指导价：<span>{{::product.ProPrice}}</span></p> </div> </a> </div> </div> </div> <div class="show"> <div><h3><div class="title">资讯</div><div class="more"><a ng-click="showProduct(6)" class="button button-icon">更多<i class="ion-ios-arrow-right"></i></a></div></h3></div> <div class="share"> <div class="list"> <a class="item item-thumbnail-left" href="#news/{{::news.id}}" ng-repeat="news in ::brand.brand_news"> <div class="left"><img image-lazy-src="{{::news.imageurl|imgFilter:root.newsUrl}}" class="dfimg1"></div> <div class="right"><h2 ng-bind-html="::news.Title"></h2> <p class="date">{{::news.PostDate}}</p> <p class="introduction" ng-bind-html="::news.NaviContent"></p> </div> </a> </div> </div> </div> <div class="show distributor" ng-if="::brand.brand_jxs"> <div><h3><div class="title">经销商</div><div class="more"><a ng-click="showProduct(3)" class="button button-icon">更多<i class="ion-ios-arrow-right"></i></a></div></h3></div> <div class="taking" ng-repeat="bus in ::brand.brand_jxs"> <h2>{{::bus.Jcompany}}</h2> <div class="add"><b>地址：</b>{{::bus.Jprovince}} {{::bus.Jcity}} {{::bus.Jaddress}}</div> <!--<div class="price"><div class="market"><b>市场指导价：</b>￥500</div><div class="low"><b> 全网最低价：</b>￥420</div></div>--> <div class="list"> <a class="item item-icon-left" href="tel:{{::bus.Jtel||bus.Jmobile}}"> <i class="icon ion-ios-telephone-outline"></i> {{::bus.Jtel||bus.Jmobile}} </a> <a class="item item-icon-left ground" ng-disabled="!bus.lat" href="#map/{{::bus.lng}}/{{::bus.lat}}/{{::bus.tel||bus.mobile}}/{{::bus.company}}/{{::bus.connecter}}"> <i class="icon ion-ios-location-outline map" ng-disabled="!bus.lat"></i> {{::bus.lat?'查看地图':'暂无地图'}} </a> </div> </div> </div> <!--<div class="show" ng-if="brand.brand_video"> <div><h3><div class="title">相关视频</div><div class="more"><a ng-click="showProduct(7)" class="button button-icon">更多<i class="ion-ios-arrow-right"></i></a></div></h3></div> <div class="frequency"> <dl ng-repeat="video in brand.brand_video"> <dd><a href="#/video"><img ng-src="{{video.videoSmallPath|imgFilter:root.videoUrl}}" /></a></dd> <dt><a href="#/video/{{video.videoId}}">{{video.videoTitle}}</a></dt> </dl> </div> </div>--> </ion-content> <ion-content class="has-subheader" ng-switch-when="2"> <ion-refresher pulling-text="下拉" refreshing-text="刷新中..." spinner="ios" on-refresh="doRefreshProduct()"> </ion-refresher> <ion-spinner icon="ios" ng-if="pltip==2"></ion-spinner> <div class="share productlist"> <ion-list> <a class="item item-thumbnail-left" href="#product/{{product.ID}}" collection-repeat="product in productList"> <div class="left"><img ng-src="{{product.Pic|imgFilter:root.productUrl}}" resetting-img class="dfimg1"></div> <div class="right"><h2>{{product.productname}}</h2> <p class="introduction">指导价：<span>{{product.ProPrice}}</span></p> </div> </a> </ion-list> </div> <p class="tip" style="margin-top:15px;" ng-if="pltip==1">暂无产品</p> <ion-infinite-scroll ng-if="showScroll2" spinner="ios" on-infinite="loadMoreProduct()" distance="1%"> </ion-infinite-scroll> </ion-content> <ion-content class="has-subheader" ng-switch-when="3"> <ion-refresher pulling-text="下拉" refreshing-text="刷新中..." spinner="ios" on-refresh="doRefreshJxs()">