ng-repeat in jqxNavigationBar

[ashvani18Participant]

Hi Team,

We are using jqxwidgets with angular js. we are using jqx-navigation-bar tag to generate the navigation bar, under this tag we are using ng-repeat to generate the nav tabs but ng-repeat is not working, no navigation item is generated, Below is the usage.

Any help would be appreciated.

data in $scope of directive –

		$scope.data = [
                    {
                        groupName   : 'Notifications Type 1',
                        unreadCount : 3,
                        notifications : ['Notification 1', 'Notification 1']
                    },
                    {
                        groupName   : 'Notifications Type 2',
                        unreadCount : 4,
                        notifications : ['Notification 2', 'Notification 2']
                    }
               ]

and below is, how we are using the jqx-navigation-bar in template

                           <jqx-navigation-bar id="jqxnavigationbar" jqx-settings="navigationBarSettings" jqx-create="navigationBarSettings">
                                <div ng-repeat-start="group in data" style="font-size:14px !important;">
                                    <span><b>{{group.groupName}}</b></span>
                                    <div class="alertCounts">{{group.unreadCount}} Unread</div>
                                </div>
                                <!--Content-->
                                <div  id="containermain" style="padding:0px;" ng-repeat-end>
                                    <div id="container" style="width: 100%; overflow: hidden;">
                                        <div ng-repeat="name in group.notifications" class='testnote' message_count='' style='cursor:pointer;'>
                                            <div class='row' style='overflow:hidden !important; padding:0px !important;'>
                                                <div class='col-xs-12'>
                                                    <span>{{name}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </jqx-navigation-bar>

[HristoParticipant]

Hello ashvani18,

I would like to suggest you look at this example.
I made some changes to your code and add if statement, too.
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[ashvani18Participant]

Thanks Hristo,

I have used the <jqx-expander> it works well with ng-repeat and no need to use the jquery way of creating the element

[Author]

Posts