Question

我试图在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>

JS ons.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

html代码上的{{ params }}工作正常（只需点击左侧菜单，参数就会正确传出，例如： {“msg”：“drink”} 点击“喝“项目菜单。

但是当我尝试更改html代码以显示{{ yourAPI }}时，我只会显示 [object Object] 。

此处示例：http://codepen.io/anon/pen/pJbXBq

如何获得正确的结果，以及拆分/过滤参数以仅获取“饮料”或“食物”关键字（不含“msg”：）？

非常感谢！

Answer 1

这是角度绑定。只需更改您的代码：

<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>

会解决这个问题。

在温泉菜单

1 个答案: