似乎无法将简单数据绑定到 Onsen 中的 ons-list-item UI

Question

我一直在努力获取 Onsen UI based app (running in Monaca) 来填充 <ons-list-item> 数据，但似乎找不到正确的魔法语法。

我从 "Sliding Menu" sample template 开始，它工作得很好，选择菜单项导航到特定页面，例如：

announcements.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 应用程序上设置 .controller() 的示例，以及仅具有与所需控制器匹配的命名的香草函数（如下所示）。

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" 函数，我没问题。目前我只想得到任何有用的东西。

谁能阐明 "magic" 绑定 can/should 在哪里完成？

Answer 1

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 模板；)

希望对您有所帮助！

编辑：

AngularJS 中弃用了全局控制器函数。尝试使用类似于 Codepen 示例中的内容。

似乎无法将简单数据绑定到 Onsen 中的 ons-list-item UI

Can't seem to be able to bind simple data to ons-list-item in Onsen UI

angularjs

listview

data-binding

onsen-ui

monaca