似乎无法将简单数据绑定到温泉UI中的列表项

Question

我一直在争取一个基于Onsen UI的应用程序(在摩纳哥运行)来填充<ons-list-item>数据，只是似乎找不到正确的魔法语法。

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

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"属性放在哪里(on -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"函数，我很好。目前我只想得到任何工作。

谁能解释一下"魔法"绑定可以/应该在哪里完成?

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示例的东西: