Bert.e Bert.e - 23 days ago 8
AngularJS Question

Having trouble with ons-list and angular ng-repeat

I declared a very simple component called betroomList:

(function () {
'use strict';

angular.module('betfriends')
.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>
<ons-list-item ng-repeat="item in $ctrl.betrooms">
<h1>{{item}}</h1>
</ons-list-item>
</ons-list>


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
compositeLinkFn@http://localhost:63342/BetFriends/www/lib/angular.js:8623:13
nodeLinkFn@http://localhost:63342/BetFriends/www/lib/angular.js:9330:24
compositeLinkFn@http://localhost:63342/BetFriends/www/lib/angular.js:8620:13
publicLinkFn@http://localhost:63342/BetFriends/www/lib/angular.js:8500:30


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.

Answer

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:

<ons-list-item>
    <div class="left">Left</div>
    <div class="center">Center</div>
    <div class="right">Right</div>
</ons-list-item>

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

Comments