//跳转前页面

<div class="list user_order" ng-click="userOpen('userOrder',0)">

<a class="item item-icon-right" style="background: #FFF;border: none;padding: 0 30px 0 10px;">

我的订单

<span style="float: right;">全部订单</span>

<i class="icon ion-ios-arrow-right" style="right: 0;"></i>

</a>

</div>

<!--订单状态-->

<div class="row textCenter">

<a class="col-20" href="javascript:void(0);" style="width: 20%; " ng-click="userOpen('userOrder',1)">

<img src="app/templates/default/www/img/user01.png"  width="40%" /><br>

<span class="color_666 fontsize15">待付款</span>

</a>

<a class="col-20" href="javascript:void(0);" style="width: 20%; " ng-click="userOpen('userOrder',2)">

<img src="app/templates/default/www/img/user02.png"  width="46%" /><br>

<span class="color_666 fontsize15">待发货</span>

</a>

<a class="col-20" href="javascript:void(0);" style="width: 20%; " ng-click="userOpen('userOrder',3)">

<img src="app/templates/default/www/img/user03.png"  width="45%" /><br>

<span class="color_666 fontsize15">待收货</span>

</a>

<a class="col-20" href="javascript:void(0);" style="width: 20%; " ng-click="userOpen('userOrder',4)">

<img src="app/templates/default/www/img/user04.png"  width="39%" /><br>

<span class="color_666 fontsize15">已完成</span>

</a>

<a class="col-20" href="javascript:void(0);" style="width: 20%; " ng-click="userOpen('userAfterbuy')">

<img src="app/templates/default/www/img/user05.png"  width="43%" /><br>

<span class="color_666 fontsize15">售后</span>

</a>

</div>

<!--订单状态结束-->

//跳转前页面控制器内的

$scope.userOpen = function(type,tabs){

if(type=="serverOrder"){

$state.go('app.serverOrder');

}else if(type=="userOrder"){

$state.go('app.v2_userOrder',{tab:tabs});

}

}

//跳转后页面路由内

.state('app.v2_userOrder', {

url: '/v2_userOrder',

cache:false,

views: {

'tab-user': {

templateUrl: 'app/templates/default/shop/templates/v2_userOrder.html',

controller:'v2_userOrderCtrl'

}

},

params:{

tab:null //添加参数

}

})

//跳转后页面(改变下划线)

<!--tab切换-->

<div class="order_tab">

<ul>

<li ng-class="{true: 'active', false: ''}[tabNumber == false]" toggle-class="active" ng-click="changeStatus(0)">全部</li>

<li ng-class="{true: 'active', false: ''}[tabNumber == 1]"  toggle-class="active" ng-click="changeStatus(1)">待付款</li>

<li ng-class="{true: 'active', false: ''}[tabNumber == 2]"  toggle-class="active" ng-click="changeStatus(2)">待发货</li>

<li ng-class="{true: 'active', false: ''}[tabNumber == 3]"  toggle-class="active" ng-click="changeStatus(3)">待收货</li>

<li ng-class="{true: 'active', false: ''}[tabNumber == 4]"  toggle-class="active" ng-click="changeStatus(4)">已完成</li>

</ul>

</div>

<!--tab切换结束-->

//跳转后页面控制器(内容改变为指定的选项卡内容)

.controller('v2_userOrderCtrl',function($scope,$state,$stateParams) {

$scope.tabNumber = $stateParams.tab;

if($scope.tabNumber == 1){

$scope.payment=true;

}else if ($scope.tabNumber == 2){

$scope.sentGoods=true;

}else if ($scope.tabNumber == 3){

$scope.waitGoods=true;

}else if ($scope.tabNumber == 4){

$scope.completed=true;

}else{

$scope.payment=true;

$scope.sentGoods=true;

$scope.waitGoods=true;

$scope.completed=true;

}

});

Angularjs跳转切换至对应选项卡的更多相关文章

  1. AngularJS应用页面切换优化方案

    葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如本篇的在页面切换的过程中优化方案,欢迎大家跟 ...

  2. jQuery Mobile页面跳转切换的几种方式

    jQuery Mobile在移动开发中越来越受到欢迎. 而他的各个版本号也在持续不断的更新中.相同的我也非常喜欢它,它加快了我们开发HTML5的速度. 同一时候又具备jQuery一样的操作方法. 学起 ...

  3. AngularJs应用页面切换优化方案(转)

    目录[-] 前言 场景 使用resolve来提前请求数据 为页面加入切换动画 总结 葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研 ...

  4. 《转载》两个activity界面间跳转切换动画效果

    1overridePendingTransition Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画. 它包括两个部分:一部分是第一个activity退出 ...

  5. eclipse设置是否自动跳转切换到debug视图模式

    之前一直用公司二次封装的eclipse,这几天用原生态的eclipse,刚开始使用eclipse进行调试时,会自动跳转到debug视图.后来不小心关闭了,就不会自动切换到debug视图. 这个小问题之 ...

  6. Angularjs 跳转页面并传递参数的方法总结

    http://www.zhihu.com/question/33565135 http://www.codeproject.com/Articles/1073780/ASP-NET-MVC-CRUD- ...

  7. angularJs的ng-class切换class

    在angular中为我们提供了3种方案处理class: 1:scope变量绑定 2:字符串数组形式. 3:对象key/value处理. 第一种我们不推荐使用,看看其他两种解决方案: 字符串数组形式 字 ...

  8. Android实现Activity页面跳转切换动画特效

    了解Android程序设计的人应该知道,在Android 2.0之后有了overridePendingTransition(),其中里面两个参数,一个是前一个activity的退出,另一个activi ...

  9. [angularJS]ng-hide|ng-show切换

    <div class="row ng-scope"> <div class="col-lg-12"> <h1 class=&quo ...

随机推荐

  1. SHELL命令集锦

    1.定时任务crond使用. crontab -e -u www文件编辑保存在/var/spool/cron/www文件中. 参考示例: */1 * * * * /usr/local/php/bin/ ...

  2. colinux

    Colinux是什么?2004年,由一名21岁的以色列学生与几名日本的自由程序员合作开发出了一个名为“Cooperative Linux”即“CoLinux”的Linux程序,该程 序可使Linux的 ...

  3. GCTF2017部分write up

    Misc stage1 拿到题看到是一张图片隐写 用神器Stegsolve看看发现左上角藏着一张二维码 截下来,不能直接扫,需要反色处理一下 扫出来是一串十六进制 看头几个十六进制数发现是pyc文件 ...

  4. mysql主键约束和唯一性约束

    主键约束和唯一性约束都是索引,它们的区别是: 主键字段可以确保唯一性,但主键字段不能为NULL. 唯一性约束可以确保唯一性,但唯一性约束的字段可以为NULL 唯一性约束对含有NULL的记录不起作用,即 ...

  5. iOS-swift-协议和拓展

    1 协议(protocol) 使用关键字 protocol 创建协议. protocol ExampleProtocol { var simpleDescription: String { get } ...

  6. Python原理 -- 深浅拷贝

    python原理 -- 深浅拷贝 从数据类型说开去 str, num : 一次性创建, 不能被修改, 修改即是再创建. list,tuple,dict,set : 链表,当前元素记录, 下一个元素的位 ...

  7. java 生产者 与 消费者的案例

    主要理解了两个问题 1.线程数据同步的问题 2.线程交替运行的方式 package ThreadDemo; /** * 生产者与消费者的案例(一,同步的问题,值的问题 二,交替执行的问题) * @au ...

  8. Markdown: 编译pdf

    在网上发布博文的时候希望能顺便在本地保存一份记录,这样总结的东西很多的时候就可以写成一本给自己看的小书了.在linux下面有两个选择latex和markdown,虽然latex非常强大,但是很少有博客 ...

  9. 按enter 进行搜索 enter提交表单

    //按enter 进行搜索 document.onkeydown = function(e){ var ev = document.all ? window.event : e; if(ev.keyC ...

  10. 【jframe】Java Web应用程序框架 - 第01篇:Get Started

    jframe是什么? jframe是一个基于MIT协议开源的java web应用程序框架,汇聚了我们团队之于java web应用程序的核心架构思想以及大量最佳实践,并且持续在实际项目中不断完善优化. ...