jQuery UI Widgets › Forums › Navigation › Tabs › Tabs associated to one div
This topic contains 2 replies, has 2 voices, and was last updated by aigleborgne 10 years, 7 months ago.
-
Author
-
Hello,
Currently, each tab is associated to one div, which is great for classical use cases.
But I’d like to use tabs with view rendering using angularjs : I’m not interested by the tab rendering, only the tabs selection. Tabs are only used to render a view, and in my case, it is the same view with a different parameter value.
It is done with angular-bootstrap this way:<ul id="type-tabs" class="nav nav-tabs"> <li data-ng-repeat="type in types" data-ng-class="{ active: $state.includes('param-config.paramList') && $stateParams.typeId == type.id }"> <a data-ui-sref="param-config.paramList({typeId: type.id})">{{type.label}}</a> </li> </ul> <div class="tab-view" data-ui-view></div>
I tried to do the same thing with jqx-tabs but it is different because selected tab is rendered while others are hidden.
I think this component could not easily used the same way but I might be wrong?Hello aigleborgne,
You can use ng-repeat for the tabs content sections, too. Here is an example that shows how:
<!DOCTYPE html> <html lang="en" ng-app="demoApp"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript"> var demoApp = angular.module("demoApp", []); demoApp.controller('tabsController', function ($scope) { $scope.tabs = [{ title: "Tab1", content: "Content of Tab1" }, { title: "Tab2", content: "Content of Tab2" }, { title: "Tab3", content: "Content of Tab3" }]; }); $(document).ready(function () { $('#jqxTabs').jqxTabs({ width: '90%', height: 200, position: 'top' }); }); </script> </head> <body class='default' ng-controller="tabsController"> <div id='jqxTabs'> <ul> <li ng-repeat="tab in tabs">{{tab.title}}</li> </ul> <div ng-repeat="tab in tabs"> {{tab.content}} </div> </div> </body> </html>
We hope it is helpful to you.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/It doesn’t solve my issue. This is the code I used:
<div data-jq-tabs> <ul> <li data-ng-repeat="mod in mods" data-ng-class="{ active: $state.includes('spells.list') && $stateParams.modId == mod.id }"> <a data-ui-sref="spells.list({modId: mod.id})">{{mod.name}}</a> </li> </ul> <div data-ng-repeat="mod in mods"></div> </div>
module.directive('jqTabs', [ '$compile', '$timeout', '$jqCommon', '$jqTabs', function JqTabsDirective($compile, $timeout, $jqCommon, $jqTabs) { return { restrict : 'AE', link : function(scope, element, attributes) { var params = scope.$eval(attributes.jqTabs) || {}; var options = angular.extend({}, $jqCommon.options(), $jqTabs.options(), params); $timeout(function() { element.jqxTabs(options); }); } }; } ]);
Pretty simple, but my tabs have an empty content since I am rendering a unique view for all of them:
$stateProvider.state('spells.list', { url : '/:modId', views : { 'spell-list' : { controller : 'SpellListController', templateUrl : 'spell/spell-list.tpl.html', } }, resolve : { spells : [ 'SpellService', '$stateParams', function(SpellService, $stateParams) { var spells = SpellService.getSpells($stateParams.modId); return angular.isDefined(spells.$promise) ? spells.$promise : spells; } ] } });
So, as for tab content, I have one div pointing to the view:
<div class="tab-view" data-ui-view></div>
I will play around to see if I can find a good solution!
-
AuthorPosts
You must be logged in to reply to this topic.