Hello,
I am trying to create dynamic tabs using angularjs. I referred your example and implemented the following code:
In the code below, I created the Node.js tab which is shown by default. However, according to my requirement, I do not want to see any tabs when I first launch the code. If I remove the Node.js tab, I get error saying addLast function not defined. I think I would have to instantiate the tabs in a different way. Can you please tell me, how can i implement this functionality?
Code:
<!DOCTYPE html>
<html ng-app=”demoApp”>
<head>
<title id=’Description’>AngularJS Tabs can display a close button in each tab. This can
be achieved by setting the ‘showCloseButtons’ property to true. In this demo we
demonstrate how to show close buttons in all tabs and add an additional button next
to the tabs.</title>
<meta name=”description” content=”AngularJS Tabs example. This example demonstrates Tabs with Close Buttons.” />
<link rel=”stylesheet” href=”./jqwidgets/styles/jqx.base.css” type=”text/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/jqxcheckbox.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) {
var addButton,
addButtonWidth = 29,
index = 0;
var tabs = {};
$scope.tabsSettings = {
height: 220, width: 1000, showCloseButtons: true,reorder: true,
created: function (args) {
tabs = args.instance;
}
};
var index = 0;
var loadPage = function (url, tabIndex) {
$.get(url, function (data) {
// dynamically appends data returned from a server to a content element with ID equal to “content1”
// for the first tab, “content2” for the second tab or “content3″ for the third tab.
$(‘#content’ + tabIndex).html(data);
});
}
var mrkUp = ‘<div>’ +
‘<div ng-include=”TOSview.html”></div>’ +
‘</div>’;
$scope.addtab = function () {
tabs.addLast(‘Sample title’,loadPage(‘TOSview.html’,tabs.val()));
tabs.ensureVisible(-1);
};
});
</script>
</head>
<body ng-controller=”demoController”>
<jqx-button jqx-on-click=”addtab()”>Add tab</jqx-button>
<jqx-tabs jqx-settings=”tabsSettings”>
<ul style=’margin-left: 10px;’>
