Bert.e Bert.e - 5 months ago 25
AngularJS Question

Having trouble with ons-list and angular ng-repeat

I declared a very simple component called betroomList:

(function () {
'use strict';

.component('betroomList', {
templateUrl: 'src/home/betroomList.template.html',
controller: BetroomListController,
bindings: {
betrooms: '<'

function BetroomListController() {
var ctrl = this;

ctrl.betrooms = ['item1', 'item2', 'item3'];

As you can see, its controller contains a table of strings. In the template HTML, I would like to create an ons-list with the content of this table. Here is what contains betroomList.template.html:

<ons-list-item ng-repeat="item in $ctrl.betrooms">

My problem is that while it works fine in Google Chome it does not it Firefox. Indeed, in Chrome it correctly displays the list with 3 rows "item1", "item2" and "item3" but in Firefox I only have a list of one element "{{item}}".
In addition, the Firefox console contains an error:

Error: node is undefined

It might be worth noting that if I replace respectively ons-list with ul and ons-list-item with li, everything works as expected.

Does anyone have an idea why this doesn't work?

Thanks a lot in advance.


You might have to take it up with Onsen UI.

The only thing I can see is that they recommend using 3 classes for the item, basically to be left, centre and right:

    <div class="left">Left</div>
    <div class="center">Center</div>
    <div class="right">Right</div>

You are using a H1 tag around your {{item}}. Maybe you should try using just a div, and see what it does.