- {{country.name}} {{country.population}}
TabStrip directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 04 December 2015
In general, the data presented in the tabs is already included in the web page. In cases where we want to change the content for specific tab or load tabs in whole from a remote data source, we can use a JSON file as our data source. In following sections, we will show you how to do using the IntegralUI TabStrip directive for AngularJS.
Similar: TabStrip Component for Angular 2
As above demo shows, the content of tabstrip is fully loaded from a JSON file. Tab headers show the name of the continent, while tab content shows a list of countries with their population.
At first, we need to specify the content of our tabs, their header and content. In our example we are showing a list of continents with some countries and their population. For this purpose, the tab header will display the continent name, and as tab content we will show a list of countries with their population number. Therefore, our JSON will look like:
[
{
"id": "1",
"name": "Europe",
"continent": "Europe",
"content": [
{ "name": "France", "population": "66,109,000" },
{ "name": "Germany", "population": "80,925,000" },
{ "name": "Italy", "population": "60,788,845" }
]
},
{
"id": "2",
"name": "North America",
"continent": "North America",
"content": [
{ "name": "Canada", "population": "35,702,707" },
{ "name": "Mexico", "population": "121,005,815" },
{ "name": "USA", "population": "320,651,000" }
]
},
{
"id": "3",
"name": "South America",
"continent": "South America",
"content": [
{ "name": "Argentina", "population": "43,131,966" },
{ "name": "Brazil", "population": "204,134,000" }
]
},
{
"id": "4",
"name": "Asia",
"continent": "Asia",
"content": [
{ "name": "China", "population": "1,369,140,000" },
{ "name": "India", "population": "1,269,545,000" },
{ "name": "Japan", "population": "126,910,000" },
{ "name": "Saudi Arabia", "population": "31,521,418" },
{ "name": "South Korea", "population": "51,342,881" }
]
},
{
"id": "5",
"name": "Africa",
"continent": "Africa",
"content": [
{ "name": "Egypt", "population": "88,311,000" },
{ "name": "Nigeria", "population": "185,043,000" },
{ "name": "South Africa", "population": "54,002,000" }
]
}
]
Now, we need to specify how our data from JSON file will be displayed to the end user. For tab header we are only showing a single lined text, so we only need to specify the heading property for each tab. As for the tab content, we will create a list showing the country name and its population.
<iui-tabstrip name="{{ctrlName}}" class="directive" tabs="tabs">
<iui-tab ng-repeat="tab in tabs" name="{{tab.name}}" heading="{{tab.continent}}">
<ul class="country-list">
<li ng-repeat="country in tab.content">
<span>{{country.name}}</span>
<span>{{country.population}}</span>
</li>
</ul>
</iui-tab>
</iui-tabstrip>
.directive
{
width: 450px;
height: 250px;
}
.iui-tab-content
{
padding: 10px;
}
.country-list
{
width: 95%;
}
.country-list li
{
border-bottom: thin solid gray;
margin: 10px 0;
}
.country-list span:last-child
{
float: right;
}
Finally, we will use $http to load the data from JSON file to the tabstrip. Because tab objects are already specified in our application controller, and there are linked with the TabStrip directive properties, we only need to populate them with some data.
angular
.module("appModule", ["integralui"])
.controller("appCtrl", ["$scope", "IntegralUITabStripService", "$http", "$timeout", function($scope, $ctrlService, $http, $timeout){
// A unique identifer for the tabstrip
$scope.ctrlName = "ctrlSample";
// An object that holds the tabs
$scope.tabs = [];
var initTimer = $timeout(function(){
// Load JSON file
var dataSource = $http.get('tabs-continents.json');
if (dataSource){
dataSource.success(function(data){
// Suspend the tab layout to increase performance
$ctrlService.suspendLayout($scope.ctrlName);
// Populate Tabs from JSON file
$ctrlService.loadData($scope.ctrlName, data);
// Resume and update the tab layout
$ctrlService.resumeLayout($scope.ctrlName);
});
dataSource.error(function(data){
alert("AJAX failed to Load Data");
});
}
$timeout.cancel(initTimer);
}, 1);
}]);
Populating the Angular TabStrip directive dynamically with data from a remote data source, in this case a JSON file, is simple. We only need to create the data structure for the tabs, and then link this data with the TabStrip properties. When data is loaded, the tabs will appear.