AngularJS页面之间传值问题

来源:互联网 发布:淘宝盖楼需要等级吗 编辑:程序博客网 时间:2024/05/16 10:12

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 }}&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9b9b9b;">容纳{{ item.OF_MAXUSER  }}人</span>&nbsp;&nbsp;&nbsp;<span style="color:#5077aa">已预订:{{}}次</span></div>
                        </div>

   </div>
            </ion-item>
        </ion-list>

以上代码已经基本上实现了页面之间的传值问题,并且是一次性传递多个参数。页面上是循环出从后台取出来的值。