- <!doctype html>
- <html ng-app=
"app"
> - <head>
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
- <script src="components.js"></script>
- <script src="app.js"></script>
- </head>
- <body>
- <
tabs
> - <
pane
title
="Localization
"> - <span>Date: {{ '2012-04-01' | date:'fullDate' }}</span><br>
- <span>Currency: {{ 123456 | currency }}</span><br>
- <span>Number: {{ 98765.4321 | number }}</span><br>
- </pane>
- <pane title="
Pluralization
"> - <div ng-controller="
BeerCounter
"> - <div ng-repeat="beerCount in beers">
- <
ng-pluralize
count
="beerCount" when
="beerForms"></ng-pluralize> - </div>
- </div>
- </pane>
- </tabs>
- </body>
- </html>
- angular.module('components', [])
-
- .
directive
('tabs
', function() { - return {
-
restrict
: 'E', -
transclude
: true, -
scope
: {}, -
controller
: function($scope
, $element
) { - var panes = $scope.panes = [];
-
- $scope.
select
= function(pane) { - angular.forEach(panes, function(pane) {
- pane.selected = false;
- });
- pane.selected = true;
- }
-
- this.
addPane
= function(pane) { - if (panes.length == 0) $scope.select(pane);
- panes.push(pane);
- }
- },
-
template
: - '<div class="tabbable">' +
- '<ul class="nav nav-tabs">' +
- '<li ng-repeat="pane in panes" ng-class="{
active
:pane.selected}">'+ - '<a href=""
ng-click
="select(pane)">{{pane.title}}</a>' + - '</li>' +
- '</ul>' +
- '<div class="tab-content"
ng-transclude
></div>' + - '</div>',
-
replace
: true - };
- })
-
- .directive('pane', function() {
- return {
-
require
: '^tabs', - restrict: 'E',
- transclude: true,
- scope: { title: '@' },
- link: function(scope, element, attrs,
tabsController
) { - tabsController.addPane(scope);
- },
- template:
- '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
- '</div>',
- replace: true
- };
- })
- angular.module('app', ['
components
']) -
- .controller('BeerCounter', function($scope,
$locale
) { - $scope.
beers
= [0, 1, 2, 3, 4, 5, 6]; - if ($locale.
id
== 'en-us') { - $scope.
beerForms
= { - 0: 'no beers',
- one: '{} beer',
- other: '{} beers'
- };
- } else {
- $scope.beerForms = {
- 0: 'žiadne pivo',
- one: '{} pivo',
- few: '{} pivá',
- other: '{} pív'
- };
- }
- });