AngularJS是做移动端页面比较火的一个前端插件,自从春节后一直在研究angularjs和ionic的使用。前几天做的页面涉及到页面之间的传值问题,在这分享下自己的经验:
angularjs传值问题最简单的方法是通过APP.js传值,格式如下:
.state('orderContent', {
url:"/orderContent",
params:{id:null, name: null,date:null,userid:null},
cache:false,
templateUrl:"orderContent.html",
controller:'orderContentCtrl'
})
至于为什么每个属性值都先赋值为null,我也不是很清楚。。。
controller.js的代码:
........
var userid="caicai" ;
$scope.goToDetail = function (item) {
var date=document.getElementById("remindtime").innerText ;
var name=item.OF_OFFICENAME;
var id=item.OF_OFFICEID;
$state.go('orderContent',{id: id,name:name,date:date,userid:userid});
}
..........
前端页面的代码:
<ion-item ng-repeat="item in items"
item="item"
ng-click="goToDetail(item)"
class="item-remove-animate" style="height: 65px;vertical-align: middle;padding-top: 1px;">
<!--<div class="button button-clear" style="width:100%;height: 100%;float: right;font-size: 12px;vertical-align: middle;">-->
<div style="width: 100%;" class="warp">
<div style="font-size:16px;width: 100%;float:left;color: #000000;padding-top: 15px;">{{ item.OF_OFFICENAME }} <span style="color: #9b9b9b;">容纳{{ item.OF_MAXUSER }}人</span> <span style="color:#5077aa">已预订:{{}}次</span></div>
</div>
</div>
</ion-item>
</ion-list>
以上代码已经基本上实现了页面之间的传值问题,并且是一次性传递多个参数。页面上是循环出从后台取出来的值。