jQuery UI Widgets Forums Navigation NavigationBar, ToolBar, NavBar ng-repeat in jqxNavigationBar

This topic contains 2 replies, has 2 voices, and was last updated by  ashvani18 3 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • ng-repeat in jqxNavigationBar #102470

    ashvani18
    Participant

    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>
    
    ng-repeat in jqxNavigationBar #102481

    Hristo
    Participant

    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

    ng-repeat in jqxNavigationBar #102489

    ashvani18
    Participant

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.