angularjs - Can't seem to be able to bind simple data to ons-list-item in Onsen UI -
i've been fighting getting onsen ui based app (running in monaca) populate <ons-list-item>
data , can't seem find right magic syntax.
i started "sliding menu" sample template , works fine, choosing menu item navigates specific page, e.g.:
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>
if change ng-repeat
attribute value items in [1,2,3,4,5]
renders 5 items in list fine.
what i'm struggling getting items
data defined externally. no matter place ng-controller="announcementcontroller"
attribute (on ons-list-item, or of parents) can't seem recognized or run.
i've seen many examples setting .controller()
on ons app, vanilla functions (like below) have naming matches desired 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' } ]; }
but can't combination work. i'm fine if need use controller, or call "init/ready" function. want works.
can shed light on "magic" binding can/should done?
ng-controller
should placed inside ons-list
(or parent) , ng-repeat
inside ons-list-item
follows:
<ons-list ng-controller="mycontroller"> <ons-list-item ng-repeat="item in items"> {{item.title}} - {{item.description}} </ons-list-item> </ons-list>
that enough make dynamic list. can check here: http://codepen.io/frankdiox/pen/wajagy
if need more examples, check masterdetail template instead of slidingmenu 1 ;)
hope helps!
edit:
global controller functions deprecated in angularjs. try use in codepen example.
Comments
Post a Comment