Angularjs跳转切换至对应选项卡
//跳转前页面
<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跳转切换至对应选项卡的更多相关文章
- AngularJS应用页面切换优化方案
葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如本篇的在页面切换的过程中优化方案,欢迎大家跟 ...
- jQuery Mobile页面跳转切换的几种方式
jQuery Mobile在移动开发中越来越受到欢迎. 而他的各个版本号也在持续不断的更新中.相同的我也非常喜欢它,它加快了我们开发HTML5的速度. 同一时候又具备jQuery一样的操作方法. 学起 ...
- AngularJs应用页面切换优化方案(转)
目录[-] 前言 场景 使用resolve来提前请求数据 为页面加入切换动画 总结 葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研 ...
- 《转载》两个activity界面间跳转切换动画效果
1overridePendingTransition Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画. 它包括两个部分:一部分是第一个activity退出 ...
- eclipse设置是否自动跳转切换到debug视图模式
之前一直用公司二次封装的eclipse,这几天用原生态的eclipse,刚开始使用eclipse进行调试时,会自动跳转到debug视图.后来不小心关闭了,就不会自动切换到debug视图. 这个小问题之 ...
- Angularjs 跳转页面并传递参数的方法总结
http://www.zhihu.com/question/33565135 http://www.codeproject.com/Articles/1073780/ASP-NET-MVC-CRUD- ...
- angularJs的ng-class切换class
在angular中为我们提供了3种方案处理class: 1:scope变量绑定 2:字符串数组形式. 3:对象key/value处理. 第一种我们不推荐使用,看看其他两种解决方案: 字符串数组形式 字 ...
- Android实现Activity页面跳转切换动画特效
了解Android程序设计的人应该知道,在Android 2.0之后有了overridePendingTransition(),其中里面两个参数,一个是前一个activity的退出,另一个activi ...
- [angularJS]ng-hide|ng-show切换
<div class="row ng-scope"> <div class="col-lg-12"> <h1 class=&quo ...
随机推荐
- 一道C语言安全编码题目
1.前言 最近在网上看到一道C语言题目,用C语言实现一个函数,给定一个int类型的整数,函数输出逆序的整数,例如输入123,则输出字符串"321",,输入-123,则输出字符串&q ...
- [转] (CQRS)命令和查询责任分离架构模式(一) 之 什么是CQRS
什么是CQRS? 这个问题网上可以找到很多资料,未接触过的童鞋请先查看Udi Dahan, Grey Young, Rinat Abdullin,园子里dax.net,以及Jdon社区上的相关文章. ...
- OFFICE 文档转换为html在线预览
OFFICE 文档在线预览方案很多: 服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览,比如flexpaper Office文档直接转换为SWF,通过网页加载Flash预览 微软的 ...
- 计时器60s
计时器是经常用到的功能,下面以react nativ的例子简介来写一个倒计时60s的小demo. 代码如下: import React, { Component } from 'react'; imp ...
- .net 4.0 中的特性总结(三):垃圾回收
1.内存基础知识 每个进程都有其自己单独的虚拟地址空间. 同一台计算机上的所有进程共享相同的物理内存,如果有页文件,则也共享页文件. 默认情况下,32 位计算机上的每个进程都具有 2 GB 的用户模式 ...
- Xmanager连接到RedHat Enterprise Linux 6.8
RedHat Enterprise Linux 6 配置Xmanager ,实现图形界面连接 X是用在大多数UNIX系统中的图形支持系统.如果你在你的Linux机器上使用GNOME或者KDE的话,你就 ...
- jeecg关闭当前iframe
关闭当前iframe function closeDialog(){ frameElement.api.close();//本方法也行 //或者下面的方式 var win = frameElement ...
- 小程序解析html标签wxPrase插件
微信小程序的标签和原来我们习惯用的标签是不一样的,例如视图容器标签小程序是view,然而html就很多比如常用的div就和小程序的view类似. 通常我们在开发小程序(从列表页跳转到详情页)通过富文本 ...
- 用removeLast和removeFrist来模仿堆和栈
/* *在大不久前,我决定自学Java,关注了很多的公众号.微博等.没几天我看到一个笑话: *晚上孩子哭了,老婆让我去看看. *我说:"不行,咱们的床是队列,你先上的床就得你先下床... * ...
- ecshop中smarty比较操作符(eq,ne,neq)含义
eq相等, ne.neq不相等, gt大于, lt小于, gte.ge大于等于, lte.le 小于等于, not非, mod求模. is [not] div by是否能被某数整除, is [not ...