在温泉菜单上传递参数

Passing parameters on Onsen menu

本文关键字：参数 温泉 菜单      更新时间：2023-09-26

我试图在Onsen菜单上传递一个参数，在这个例子中它工作得很好:

<body ng-controller="AppController">
<ons-sliding-menu
                  main-page="page1.html"
                  menu-page="menu.html"       
                  side="left"
                  max-slide-distance="250px"
                  var="menu">
</ons-sliding-menu>
<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
      </div>
      <div class="center">Page 1</div>
    </ons-toolbar>
    <p style="text-align: center; color: #999; padding-top: 100px;">
      {{ params }}
    </p>
  </ons-page>
</ons-template>
<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="chevron" ng-click="params.msg='drink';  menu.setMainPage('page1.html', {closeMenu: true})">
      drink 
    </ons-list-item>
    <ons-list-item modifier="chevron" ng-click="params.msg='food';  menu.setMainPage('page1.html', {closeMenu: true})">
      food
    </ons-list-item>   
  </ons-list>
</ons-template>
</body>

JSons.bootstrap () 

app.controller('AppController', function($scope) {
    $scope.params = {};
    $scope.yourAPI = 'http://blablabla.net='+$scope.params+'&orderby=title&order=ASC';
});

示例:http://codepen.io/anon/pen/PqzrvO

{{ params }}的html代码工作良好(只需点击左侧菜单和参数将正确传递，例如:{"msg":"drink"}当点击"drink"项目菜单。

但是当我试图改变html代码来显示{{ yourAPI }}时，我只得到[object object]显示为结果。

示例:http://codepen.io/anon/pen/pJbXBq

如何得到正确的结果，以及分割/过滤参数，只得到"饮料"或"食品"关键字(没有"msg":)?

非常感谢!

这是角绑定。修改代码:

<p style="text-align: center; color: #999; padding-top: 100px;">
  {{ yourAPI }}
</p>


<p style="text-align: center; color: #999; padding-top: 100px;">
  {{ params.msg }}
</p>

相关文章：