1

我一直在努力让基于Onsen UI的应用程序（在Monaca中运行）来填充<ons-list-item>数据，但似乎无法找到正确的魔法语法。

我从“滑动菜单”示例模板开始，它工作得很好，选择菜单项导航到特定页面，例如：

公告.html

<ons-navigator var="myNavigator">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
      </div>
      <div class="center">Announcements</div>
    </ons-toolbar>
    <ons-list>
      <ons-list-item modifier="chevron" ng-repeat="item in items">{{item.title}} ({{item.description}})</ons-list-item>
    </ons-list>
  </ons-page>
</ons-navigator>

如果我将ng-repeat属性值更改为items in [1,2,3,4,5]它会在我的列表中呈现 5 个项目就好了。

我正在苦苦挣扎的是让items数据在外部定义。无论我将ng-controller="AnnouncementController"属性放在哪里（在 ons-list-item 或其任何父项上），我似乎都无法识别或运行它。

我已经看到很多在 ons 应用程序上设置 a 的示例.controller()，以及仅具有与所需控制器匹配的命名的 vanilla 函数（如下所示）。

function AnnouncementController($scope, $http){
  $scope.items = [
    {
      title: 'Item 1',
      description: 'Item 1 Description'
    },
    {
      title: 'Item 2',
      description: 'Item 2 Description'
    },
    {
      title: 'Item 3',
      description: 'Item 3 Description'
    }
  ];
}

但我无法让任何组合起作用。如果我需要使用控制器，或者只是调用“init/ready”函数，我很好。目前我只想得到任何有效的东西。

谁能阐明“魔术”绑定可以/应该在哪里完成？

4

1 回答 1

3

ng-controller应放置在内部ons-list（或父级）和ng-repeat内部ons-list-item，如下所示：

<ons-list ng-controller="MyController">
    <ons-list-item ng-repeat="item in items">
         {{item.title}} - {{item.description}}
    </ons-list-item>
</ons-list>

这足以制作一个动态列表。你可以在这里查看：http ://codepen.io/frankdiox/pen/wajagY

如果您需要更多示例，只需检查 MasterDetail 模板而不是 SlidingMenu 一个；）

希望能帮助到你！

编辑：

Global controller functions were deprecated in AngularJS. Try to use something like in the Codepen example.

于 2015-07-09T00:58:10.093 回答