jQWidgets Forums
jQuery UI Widgets › Forums › General Discussions › Plugins › AngularJS › JQXTAB with Angularjs
This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 8 months ago.
-
AuthorJQXTAB with Angularjs Posts
-
Hi,
We have multiple controller and we need to load seperate controller in each tab.
E.G
AppController
Main Tab window
Sub Tab ID 1 Sub Tab ID 2We need to load controller in each tab ID.
Please clarify how to do that.
Thanks
Regards
V Shan
Hi V Shan,
Example:
<!DOCTYPE html> <html ng-app="demoApp"> <head> <title id="Description">jqxTabs Directive with Controllers for Each Tab</title> <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="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", ["jqwidgets"]); demoApp.controller("demoController", function ($scope) { $scope.tabsSettings = { width: 800, height: 200 } }); demoApp.controller("Tab1Controller", function ($scope) { $scope.name = "Peter Smith"; }); demoApp.controller("Tab2Controller", function ($scope) { $scope.name = "Michael Adams"; }); </script> </head> <body> <div ng-controller="demoController"> <jqx-tabs jqx-settings="tabsSettings"> <ul style="margin-left:30px;"> <li>Tab 1</li> <li>Tab 2</li> </ul> <div ng-controller="Tab1Controller">{{name}}</div> <div ng-controller="Tab2Controller">{{name}}</div> </jqx-tabs> </div> </body> </html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Thanks for a reply. I am not able to access Jqx-Settings inside Tab Control. I applied jqx-settings for Jqx-Grid but the grid is not creating.
<!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="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script> var demoApp = angular.module("demoApp", [ "jqwidgets" ]); demoApp.controller("demoController", function($scope) { $scope.tabsSettings = { width : 800, height : 800 } }); demoApp.controller("Tab1Controller", function($scope) { $scope.obj1 = { Grid1 : { width : '200', height : '100', showheader : true, columns : [ { text : 'Name', datafield : 'name', width : '100' } ] }, name : "Peter Smith", calling1 : function() { alert("Calling 1"); } }; }); demoApp.controller("Tab2Controller", function($scope) { $scope.obj2 = { Grid2 : { width : '200', height : '100', showheader : true, columns : [ { text : 'Name', datafield : 'name', width : '100' } ] }, name : "Peter", calling2 : function() { alert("Calling 2"); } }; }); </script> </head> <body> <div ng-controller="demoController"> <jqx-tabs jqx-settings="tabsSettings"> <ul style="margin-left: 30px;"> <li>Tab 1</li> <li>Tab 2</li> </ul> <div ng-controller="Tab1Controller"> {{obj1.name}} <jqx-grid jqx-settings="obj1.Grid1"></jqx-grid> <jqx-button ng-click="obj1.calling1()">Tab 1</jqx-button> </div> <div ng-controller="Tab2Controller"> {{obj2.name}} <jqx-grid jqx-settings="obj2.Grid2"></jqx-grid> <jqx-button ng-click="obj2.calling2()">Tab 2</jqx-button> </div> </jqx-tabs> </div> </body> </html>
Hi shan_vs,
I would suggest you before trying to use a widget to read how to use the widget from the Getting Started help topics and exmaples available on our website. The problem in this code is that the Required JavaScript references for jqxGrid are Missing.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
I am using import.js file, which Included all the files.
Angular.js, jquery-1.11.1.min.js, jqxcore.js, jqxdata.js, jqxbuttons.js, jqxgrid.js, jqxgrid.filter.js, jqxgrid.selection.js, jqxgrid.sort.js, jqxgrid.edit.js, jqxangular.js, etc…
Please clarify why jqx-settings not applying for components.
Hi shan_vs,
If the references are added correctly, there is no problem.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.