Tab-uri dinamice in angularjs

| Acasa | Tutoriale AngularJS
Post Title

         Dupa cum ziceam si in trecut angularjs ne simplifica viata de programator, iar in cazul de mai jos o sa va arat cat de simplu este sa faci un sistem de taburi ca cel al browserului (dai "+" si ai un nou tab, dai "x" si ai omorat un tab). Mai jos este codul si sunt sigur ca o sa intelegeti ce am facut aici, daca nu, va astep pe forum sau sa lasati comentarii ca sa primiti mai multe informatii.

Javascript : 

  1.  
  2. 'use strict';
  3.  
  4. var mp = angular.module('mpApp',[]);
  5.  
  6.  
  7. mp.controller('Tabs',function($scope) { 
  8.  
  9. 	var 
  10. 		self = {
  11. 			tabs: [],
  12. 			tabSelected: 0,
  13. 			i: 0
  14. 		};
  15.  
  16. 	self.addTab = function (name, content) {
  17. 		self.i ++;
  18. 		var 
  19. 			tabsLength  = self.tabs.length + 1,
  20. 			defaultContent = 'Tab content : '+ self.i,
  21. 			defaultName = 'Tab '+ self.i;
  22.  
  23. 		content = content || defaultContent;
  24. 		name =  name || defaultName;
  25.  
  26. 		self.tabs.push({
  27. 			name: name,
  28. 			content: content
  29. 		});
  30.  
  31. 		self.tabSelected = tabsLength > 1 
  32. 			? tabsLength - 1 
  33. 			: 0;
  34.  
  35. 	};
  36.  
  37. 	self.removeTab = function(nr) {
  38. 		self.tabs.splice(nr,1);
  39. 	};
  40.  
  41. 	self.selectTab = function(nr) {
  42. 		self.tabSelected = nr;
  43. 	};
  44.  
  45. 	return $scope.Tabs = self;
  46.  
  47. });

HTML :

  1.  
  2. <html>
  3. 	<head>
  4. 		<title>Test Controller dinamic</title>
  5. 		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  6. 	</head>
  7. 	<body ng-app="mpApp">
  8. 		<div class="tabs-wrapper" ng-controller="Tabs">
  9. 			<ul class="nav nav-tabs">
  10. 			  <li  ng-repeat="tab in Tabs.tabs">
  11. 			  	<a href="#" ng-click="Tabs.selectTab($index)">{{tab.name}} <i ng-click="Tabs.removeTab($index)" class="glyphicon glyphicon-remove"></i></a>
  12. 			  </li>
  13. 			  <li ><a ng-click="Tabs.addTab()" href="#">( + )</a></li>
  14. 			  <li ><a ng-click="Tabs.addTab(false, 'Continut Special')" href="#">( * )</a></li>
  15. 			</ul>
  16. 			<div ng-show="Tabs.tabs.length" class="tab-content">
  17. 				<div class="tab-pane active">
  18. 					<h1>Tab:  {{Tabs.tabs[Tabs.tabSelected].name}}</h1>
  19. 					<h3>{{Tabs.tabs[Tabs.tabSelected].content}}</h3>
  20. 				</div>
  21. 			</div>
  22. 		</div>
  23. 	</body>
  24. 	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  25. 	<script src="mpApp.js"></script>	
  26. </html>

 

Link live output : http://output.jsbin.com/goqugujira/1/#

Autor articol
Site : micul-programator.ro
Ştiinţa fără religie este şchioapă, religia fără ştiinţă este oarbă (Albert Einstein)
 

Articolul anterior

Articolul urmator


Topul limbajelor de programare
Topul limbajelor de programare
Protectia xss
Protectia xss
Validari cu javascript [ Partea I, pentru incepatori ]
Validari cu javascript [ Partea I, pentru incepatori ]
Technical Days .NET provoaca la discutii specialistii din acest domeniu din Iasi
Technical Days .NET provoaca la discutii specialistii din acest domeniu din Iasi

Acest articol nu este comentat, fii primul care o face

Trebuie sa fii logat sa poti lasa un comentariu Autentificare Inregistrare Logare cu Facebook
Navigare

Online

Utilizatori
Vizitatori 0
top