jqx-tabs and angular

[mikemazzParticipant]

Hi,

I’m having trouble creating two-way-binding in my jqx-tabs with angular. For example, I create a set of tab from A – Z each containing users with last names that start with the appropriate tab selection. That works great! However, if I tried to filter the content in the active tab I get nothing. Here is my code for anyone that might have an idea.

<!--<script src="js/users.js"></script>-->
<div id="usersView" style="width: 100%; height: 100%; overflow: hidden; margin: 0px;">
    <jqx-panel jqx-height="'100%'" jqx-width="'100%'">
        <div style="float: left; width:70%">
            <h2 style="">User Management</h2>
        </div>
        <div style="float:left; width:30%;">
            <jqx-check-box style="margin-top: 10px;" ng-model="users.showDisabled">Show Disabled Users</jqx-check-box>
        </div>
        <br/>

        <jqx-splitter jqx-data="users" jqx-width="'100%'" jqx-height="'100%'" jqx-orientation="'horizontal'" jqx-panels="[{ size: 370, min: 200 }]" jqx-theme="'energyblue'" >
            <div id="userList">
                <div style='margin: 5px; height:28px;'>
                    <span style="float: left; margin-left: 10px; margin-top: 5px; margin-right: 4px;">Search: </span>
                    <input class="jqx-input jqx-widget-content jqx-rc-all" data-ng-model="data.filter.name" id="searchField" type='text' style='height: 23px; float: left; width: 220px;' />
                    <span style="float: right; margin-top: 5px; margin-right: 10px;">Total Users: {{data.totalUsers}}</span>
                </div>
                <jqx-tabs ng-controller="UsersController" jqx-data="users" jqx-on-selected="tabSelected()" jqx-width="'100%'" jqx-height="'100%'" jqx-animation-type="'fade'" jqx-selection-tracker="'true'">
                    <ul>
                        <li style="margin-left: 30px;">All</li>
                        <li ng-repeat="tabName in data.tabs">{{tabName}}</li>

                    </ul>
                    <div>
                        <div class="userCard" ng-repeat="user in data.data | filter:data.filter.name | orderBy:'lastName'">
                            <div style="background-color: #E0E9F5; height: 20px;  text-align: right; padding-right: 5px;">
                                <div style="float: left; padding-left: 10px; font-size: 1.2em;">{{user.firstName}} {{user.lastName}} {{data.filter.name}}</div>
                                <div style="float: right; width: 80px; text-align: right; margin-right: 5px;">Id: {{user.userId}}</div>
                            </div>
                            <div style="float: left; margin-left: 10px;">
                                <div class='jqx-rc-all' style='margin: 10px;'></div>
                                <div style='margin-top: 10px;'>
                                    <img height="60" width="60" ng-src="images/users/{{user.img}}"><br/>
                                    <jqx-check-box style="margin-top: 5px;" ng-model="user.enabled">Enabled</jqx-check-box>
                                </div>
                            </div>
                            <div style="float: left; margin-left: 10px; margin-top: 10px;">
                                <div class="text">Login: {{user.login}}</div>
                                <div class="text">{{user.email}}</div>
                                <div class="text">{{user.phone}}</div>

                            </div>

                       </div>

                    </div>
                    <div ng-repeat="tabName in data.tabs">
                        <div class="userCard" ng-repeat="user in data.data | startsWith:'lastName':tabName | orderBy:'lastName'">
                            <div style="background-color: #E0E9F5; height: 20px;  text-align: right; padding-right: 5px;">
                                <div style="float: left; padding-left: 10px; font-size: 1.2em;">{{user.firstName}} {{user.lastName}}</div>
                                <div style="float: right; text-align: right; margin-right: 5px;">Id: {{user.userId}}</div>
                            </div>                        
                            <div style="float: left; margin-left: 10px;">
                                <div class='jqx-rc-all' style='margin: 10px;'></div>
                                <div style='margin-top: 10px;'>
                                    <img height="60" width="60" ng-src="images/users/{{user.img}}"><br/>
                                    <jqx-check-box style="margin-top: 5px;" ng-model="user.enabled">Enabled</jqx-check-box>
                                </div>
                            </div>
                            <div style="float: left; margin-left: 10px; margin-top: 10px;">
                                <div class="text">Login: {{user.login}}</div>
                                <div class="text">{{user.email}}</div>
                                <div class="text">{{user.phone}}</div>
                            </div>

                       </div>

                    </div>

                </jqx-tabs>   
            </div>
            <div id="userActions">
                <jqx-panel jqx-height="'350'" jqx-width="'100%'">
                    <div style='margin: 10px;'></div>
                    <jqx-check-box style="margin-top: 10px;" ng-model="showUserPanel"><h2 style="padding-left: 5px;">Add New User</h2></jqx-check-box>
                    <div ng-if="showUserPanel" style="margin-left: 20px; margin-right: 20px; margin-bottom: 10px;">

                        <!--<jqx-grid jqx-instance="userGrid" jqx-create="createWidget" jqx-settings="gridSettings" jqx-orientation="horizontal"></jqx-grid>-->
                        <!--<jqx-check-box style="margin-top: 10px;" ng-model="showUserPanel">Show New User Panel</jqx-check-box> -->
                        <div ng-include="'views/adduser.html'"></div>
                    </div>
                </jqx-panel>
            </div>
        </jqx-splitter>
    </jqx-panel>

</div>

[Peter StoevKeymaster]

Hi mikemazz,

From the example below, I think you will learn how to use jqx-data with Nested Directives:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/public/jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/public/jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/public/jqwidgets/jqxangular.js"></script>
    <script>
        var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope) {
            $scope.tabsSettings = {
                width: 800,
                height: 800
            }
            $scope.tabsData =
                {
                    tab1: "Tab 1 Content",
                    tab2: "Tab 2 Content"
                }
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-splitter jqx-width="400" jqx-height="400" jqx-data="tabsData">
            <div>
            	<jqx-tabs jqx-data="data" jqx-settings="tabsSettings">
		            <ul style="margin-left: 30px;">
			            <li>Tab 1</li>
			            <li>Tab 2</li>
		            </ul>
		            <div >
			            {{data.tab1}}
		            </div>
		            <div>
			            {{data.tab2}}
		            </div>
		        </jqx-tabs>
            </div>
            <div>
      
            </div>
        </jqx-splitter>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mikemazzParticipant]

Peter,

Thanks for your help. However, I’ve already got this part working. The challenge I’m having is filtering the content within a tab. I’m not really sure why the hg-repeat directive won’t properly filter when I’m inside the jqx-tab.

Any thoughts?

Thanks

[Peter StoevKeymaster]

Hi mikemazz,

In the current version of the plugin which came out with jQWidgets 3.6.0 release, the jqx-data attribute is no longer required. I would suggest you to check out the updated and new demos, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts