如何在onsen ui的pushpage方法中传递多个值

时间:2015-09-30 07:19:54

标签: javascript angularjs onsen-ui

您好我是angulajs和javasript的新手,我正在制作一个在 pushpage onsen ui 函数中传递值的演示。我已经成功地在推送页面中只传递了一个值,但是当我试图传递两个值时它没有通过,所以任何人都可以帮我解决这个问题,我试过如下:

(控制器内部)

var Content = ' ';
            var resid = ' ';
            var catname = ' '
           var options, 
         elem,
         obj = {};  


            for (i = 0 ; i< data ['Details'].length ; i++)
            { 
               resid=  + data['Details'][i]['intGlCode'] ;
                 catname   = data['Details'][i]['varName'];      

obj['params'] = resid;
obj['params1'] =  catname;
options = JSON.stringify(obj);
console.log(options);
elem = "<li class='list__item list__item--chevron' onclick=gallery.pushPage('list-page.html', "+options+");>"; 
console.log(elem);
                if (Content === ' ')
                {
                    //{params:'+resid+',params1 : '+catname+'}

                    Content =elem+
//    '<li class="list__item list__item--chevron" onclick=gallery.pushPage("list-page.html", { params: '+resid+' });>'+

 '<ons-icon class="ons-icon ons-icon--ion ion-android-restaurant fa-lg" fixed-width="true" icon='+data['Details'][i]['varIcon']+'>'+'</ons-icon>'

2 个答案:

答案 0 :(得分:1)

您需要首先使用括号表示法创建 pushPage() 参数对象,该表示法允许您注入属性值。 Ø 创建对象后,您可以将其解析为与控制器中的字符串连接的字符串。以下说明了这个

var options, 
    elem,
    obj = {},     
    resid = 'foo',
    catname = 'bar';
obj['params'] = resid;
obj['params1'] =  catname;
options = JSON.stringify(obj);
console.log(options);
elem = "<li class='list__item list__item--chevron' onclick=gallery.pushPage('list-page.html', "+options+");>";
console.log(elem); /* prints <li class='list__item list__item--chevron' onclick=gallery.pushPage('list-page.html', {"params":"foo","params1":"bar"});> */

查看下面的演示。

var options, 
    elem,
    obj = {},     
    resid = 'foo',
    catname = 'bar';
obj['params'] = resid;
obj['params1'] =  catname;
options = JSON.stringify(obj);
console.log(options);
elem = "<li class='list__item list__item--chevron' onclick=gallery.pushPage('list-page.html', "+options+");>";

pre.innerHTML = elem;
<pre id="pre"></pre>

答案 1 :(得分:0)

我所做的就是把它放在param值中。请注意,您需要一个提供json数据的php文件。

第一页

<ons-row ng-click="myNavigator.pushPage('page2.html', {param1: x.param1, param2: x.param2})">
   <ons-col width="35px">
     <i class="fa fa-stethoscope fa-2x" aria-hidden="true"></i>
   </ons-col>
   <ons-col>
    <div class="timeline-from">
      <span class="timeline-name">{{ x.param1 }}</span>
    </div>
  </ons-col>
</ons-row>

并在控制器上

//Pushed Page Controller

app.controller('PushedPageController', function($scope){
  var options = $scope.myNavigator.getCurrentPage().options;
  $scope.x = options.param1;
$scope.options = options;
})

和page2.html

<ons-list class="timeline" modifier="inset" ng-controller="PushedPageController">
 <ons-list-item class="timeline-li" modifier="tappable"  ng-repeat="a in x">
  <ons-row>
   <ons-col>
     <div class="timeline-from">
        <span class="timeline-name">{{ a.first }}</span>
     </div>
     <div class="timeline-message" >
         {{ a.second }}
     </div>
   </ons-col>
  </ons-row>
 </ons-list-item>
</ons-list>