jQWidgets Forums

Tagged: angularjs tabs, Tabs

This topic contains 4 replies, has 4 voices, and was last updated by pavel06081991 9 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

How to add a Tab dynamically? Posts
October 20, 2014 at 12:38 pm How to add a Tab dynamically? #61382
shan_vs
Participant
Here, I have created 4 tabs already, I want to add 5th tab dynamically using ng-repeat. how to add?
```
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title id="Description">jqxTabs Directive for AngularJS</title>
<link rel="stylesheet" type="text/css" href="../css/jqx.base.css" />
<script src="../Tools/angular.min.js"></script>
<script src="../Tools/jquery-1.11.1.min.js"></script>
<script src="../Tools/jqxcore.js"></script>
<script src="../Tools/jqxtabs.js"></script>
<script src="../Tools/jqxbuttons.js"></script>
<script src="../Tools/jqxangular.js"></script>
<script type="text/javascript">
	var demoApp = angular.module("demoApp", [ "jqwidgets" ]);
	demoApp.controller("demoController", function($scope) {

		$scope.arrayList = [];
		$scope.arrayList.push({
			id : 101
		});
		$scope.arrayList.push({
			id : 102
		});
		$scope.arrayList.push({
			id : 103
		});
		$scope.arrayList.push({
			id : 104
		});

		$scope.OnOneclick = function() {
			$scope.arrayList.push({
				id : 105
			});
		};
	});
</script>
</head>

<body>
	<div ng-controller="demoController">
		<jqx-tabs jqx-data="arrayList">

		<ul>
			<li ng-repeat="record in data">{{record.id}}</li>
		</ul>
		<div ng-repeat="record in data">Test{{record.id}}</div>
		</jqx-tabs>
		<jqx-button ng-click="OnOneclick()">Confirm</jqx-button>
	</div>
</body>
</html>
```
If I click “Confirm” button, the 5th tab have to add. but its displaying as <li></li>
October 21, 2014 at 5:39 am How to add a Tab dynamically? #61410

Peter Stoev
Keymaster

Hi shan_vs,

To add tabs dynamically, you have to use the jqxTabs methods for adding tabs. You can’t use ng-repeat after the widget has been initialized.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 6, 2016 at 12:15 pm How to add a Tab dynamically? #80122

sohailkhalid
Participant

I fixed this issue by using below trik
$scope.tabInstance.addLast( “New tab”, ”);
angular.element($(“#tabRnd”).find(‘div:nth-child(2)’).find(‘div:last-child’)).append(
$compile(“<div> {{1+1}}</div> “)($scope));
you can see example here
http://plnkr.co/edit/JSCXoirBnhaME6ZsVYMw?p=preview

February 13, 2016 at 2:53 pm How to add a Tab dynamically? #81418

pavel06081991
Participant

Sounds and looks ugly. It looks like a hack, but I think there is no other way how to do it. If to use ng-repeat for generating tabs dynamically, it does not work. It is so strange and it means you can not use angular way.

February 13, 2016 at 3:43 pm How to add a Tab dynamically? #81420
pavel06081991
Participant
I’m trying to use jqx-create attribute and ng-repeat. Here is my html:
```
<jqx-tabs jqx-settings="tabsSettings" jqx-create="createTabs">
  <ul>
    <li>Summary</li>
    <li ng-repeat="tab in tabsArray">{{tab.title}}</li>
  </ul>
  <div>Summary content</div>
  <div ng-repeat="tab in tabsArray">{{tab.content}}</div>
</jqx-tabs>
```
Initially createTabs is false. and tabsArray is empty array. Then I’m using ajax and get list for tabsArray. When ajax is finished I set createTabs to true. But I get arert with text “Error: Invalid structure!”. First ng-repeat works! I have lots of li tags. But second ng-repeat does not work! I have only one div with text “Summary content”. Why?
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.