Ionic之页面传值
很多时候,我们都进入一个页面往往都是需要将上一级的数据转入到下一级页面中使用,在传传统的html中时经过url来传值,所以ionic也是沿用了html中的方法。
但是还是有点区别于html。我们直接在路由中设置一个名字,之后当点击到下一页的时候,将这个值传到下一页中。
路由设置:
.state('payType',{
url:'/setting/payType?settingType',
templateUrl:'views/recharge/payType.html',
controller:'payTypeController'
})
页面代码:
<ion-view view-title="充值">
<ion-content scroll="false">
<div class="item item-divider" class="fixedTips">
----------------------------请选择充值方式---------------
</div>
<div class="item item-input" ng-click="ionWchatpay()">
<ion-item class="pay-wchatpay"></ion-item>
<span style="margin-left: 20px;">
<span style="font-size: 20px;">微信支付</span><br/>
支持微信支付
</span> </div>
<div class="item item-input" ng-click="ionAlipay()">
<ion-item class="pay-alipay"></ion-item>
<span style="margin-left: 20px;">
<span style="font-size: 20px;">支付宝</span><br/>
推荐有支付宝账户的用户使用
</span>
</div>
</ion-content>
</ion-view>
js 代码:
$scope.payType = '';
$scope.ionWchatpay = function () {
$scope.payType = 'wchatpay';
console.log("传送type:"+$scope.payType);
$state.go('payType',{settingType:$scope.payType},{reload:true});
};
下一个页面引用代码:
var settingType = $stateParams.settingType;
console.log("得到的值"+settingType);
结果截图:

Ionic之页面传值的更多相关文章
- ionic 跨页面传值的几种方法
1.使用AngularJS自带的$cacheFactory服务 $cacheFactory 从字面直译即为缓存工厂,可以用它来生成缓存对象,缓存对象以key-value的方式进行数据的存储,在整个应用 ...
- ionic单页面应用中微信分享的问题总结
首先说一下 ionic 是单页面应用,也就是说整个项目就有一个index.html, 那么问题就就来了, 如果我们不同的页面要分享给大家的是不同的链接和图片,应该怎么去做呢? 这就是我们今天要总结的东 ...
- ASP.NET MVC 5 Web编程5 -- 页面传值的方式
本篇文章将讲述MVC的页面传值方式,具体包括:后端向前端传值(Controller向View传值):前端向后端传值(View向Controller传值):Action与Action之间的传值. 回顾 ...
- WebForm 页面传值
一.使用Querystring Querystring是一种非常简单的传值方式,其缺点就是会把要传送的值显示在浏览器的地址栏中,并且在此方法中不能够传递对象.如果你想传递一个安全性不是那么太重要或者是 ...
- Spring 向页面传值以及接受页面传过来的参数的方式
来源于:http://www.cnblogs.com/liuhongfeng/p/4802013.html 一.从页面接收参数 Spring MVC接收请求提交的参数值的几种方法: 使用HttpSer ...
- ASP.NET页面传值不使用QueryString
ASP.NET页面传值不使用QueryString Asp.net中的页面传值方法: 1 Url传值 特点:主要优点是实现起来非常简单,然而它的缺点是传递的值是会显示在浏览器的地址 ...
- artdialog4.1.7 中父页面给子页面传值
artdialog4.1.7中父页面给子页面传值时看了一些网友的解决方法: 在父页面声明全局变量 var returnValue=“ ”,子页面用art.dialog.opener.returnVal ...
- webform页面传值和删除修改
一.webform跨页面传值1.内置对象地址栏数据拼接 QueryString 优点:简单好用:速度快:不消耗服务器内存. 缺点:只能传字符串:保密性差(调转页面后在地址栏显示):长度有限.响应请求对 ...
- Spring-MVC接收request参数和向页面传值总结
接收请求参数值,三种方式: 1使用HttpServletRequest获取 2使用@RequestParam注解 3使用自动封装机制封装成bean对象 向页面传值 1直接使用HttpServletRe ...
随机推荐
- Hadoop集群搭建-虚拟机安装(转)(一)
1.软件准备 a).操作系统:CentOS-7-x86_64-DVD-1503-01 b).虚拟机:VMware-workstation-full-9.0.2-1031769(英文原版先安装) VM ...
- 正则工具类以及FinalClass
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jadyer/article/details/27811103 完整版见https://jadyer. ...
- js获取三天后的日期
js获取三天后的日期 setDate getNowAddTreeFormatDate() { var date = new Date(); date.setDate(date.getDate()+3) ...
- 20170228 METHOD handle_data_changed-
CALL METHOD er_data_changed->add_protocol_entry METHOD handle_data_changed. DATA: ls_modi TYPE ...
- hihoCoder 1584 Bounce 【数学规律】 (ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛)
#1584 : Bounce 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 For Argo, it is very interesting watching a cir ...
- android checkbox radiogroup optionmenu dialog
\n换行 UI visible:View.INVISIBLE 不可见,占用空间,View.GONE 不可见,不占用空间 菜单 res右击新建menu xml 自动新建menu文件夹 context ...
- REST的本质,就是用户操作某个网络资源(具有独一无二的识别符URI),获得某种服务,也就是动词+资源(都是HTTP协议的一部分)
REST的名称”表现状态转化”中,省略了主语.”表现”其实指的是资源的表现. 资源就是网络上的一个数据实体,或者说是一个具体信息.它可以是一段文本.一张图片.一首歌曲.一种服务.你可以用一个URI(统 ...
- dede摘要长度,dedecms摘要限制,dedecms摘要字数
dede摘要长度,dedecms摘要限制,dedecms摘要字数 如果可以有效控制文章摘要的字数,那么就可以使得页面布局很灵活. 在Dedecms中,在列表页调用文章摘要的方法主要有: 1:[fiel ...
- Oracle安装:silent安装方式
之前一直是通过图形界面来安装oracle,这次上机考试说用silent (静默)形式安装.一点头绪都没有,虽然当时提供了oracle官方文档. 遂查找资料,安装了一下: 一.准备工作: 1.系统参数调 ...
- 第三届蓝桥杯C++B组省赛
1.微生物增值 2.古堡算式 3.海盗比酒量 4.奇怪的比赛 5.方阵旋转 6.大数乘法 7.放棋子 8.密码发生器 9.夺冠概率 10.取球博弈