Question

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

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

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

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

Answer 1

您应该使用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"
    }
};

Answer 2

拥有一个控制器非常简单：

<强> 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"
    }
};
}

Answer 3

除了Ataru的答案，您还可以使用＆＃34; ons.compile＆＃34;动态地将列表项注入页面，就像在JQuery Mobile中一样。函数http://onsen.io/guide/overview.html#onscompilefunction。这是一个例子;

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
});

以编程方式填充onslist

3 个答案: