0

我正在尝试使用 Onsen UI 构建一个简单的应用程序，并且我已经设置了一个空列表，我想在 ons.ready 函数中填充列表项。

我的页面上有这个 HTML 标记：

<ons-list id="deviceInfo"></ons-list>

我正在构建一个 ons-list-items 列表并用列表替换 HTML。

4

3 回答 3

0

您应该使用 AngularJS 的 ngRepeat 指令。

https://docs.angularjs.org/api/ng/directive/ngRepeat

html

<ons-list-item  ng-repeat="item in items">{{item.name}}</ons-list-item>

脚本

// When you change the contents of $scope.items in your controller, the View will dynamically change. 
$scope.items = {
    item1 : {
        name : "Hamburgar"
    },
    item2 : {
        name : "Pasta"
    },
    item3 : {
        name : "Potato"
    }
};
于 2014-08-11T09:29:07.410 回答
0

拥有一个控制器真的很简单：

HTML：

<body ng-app ng-controller="MyCtrl">
   <ons-list>
      <ons-list-item  ng-repeat="item in items">{{item.name}}</ons-list-item>
   </ons-list>
</body>

Javascript：

function MyCtrl($scope) {
// When you change the contents of $scope.items in your controller, the View will dynamically change. 
$scope.items = {
    item1 : {
        name : "Hamburgar"
    },
    item2 : {
        name : "Pasta"
    },
    item3 : {
        name : "Potato"
    }
};
}
于 2014-09-18T14:35:27.353 回答
0

除了 Ataru 的回答之外，您还可以使用“ons.compile”函数http://onsen.io/guide/overview.html#onscompilefunction将列表项动态注入到 JQuery Mobile 中的页面中。这是一个例子；

ons.ready(function() {
  var elm = $("<ons-list-item>Item One</ons-list-item>");
  elm.appendTo($("#deviceInfo")); // Insert to the DOM first
  ons.compile(elm[0]); // The argument must be a HTMLElement object
});
于 2014-11-21T11:16:34.180 回答