From 3c33cad4a4d3370eccb787c6ddc5488858e1c952 Mon Sep 17 00:00:00 2001 From: Josey Morton Date: Sun, 3 Feb 2013 22:33:42 -0600 Subject: [PATCH 1/6] adding docs for route matching directive. refs #39 --- index.html | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ js/app.js | 10 +++++++ 2 files changed, 98 insertions(+) diff --git a/index.html b/index.html index 76a17b5..d0af1a3 100644 --- a/index.html +++ b/index.html @@ -77,6 +77,7 @@
  • Show / Hide / Toggle
  • TinyMCE
  • Currency
    • +
  • Route Matching
  • @@ -1027,6 +1028,93 @@

    How?

    + +
    +
    +

    Route Checking

    +
    + +
    +
    +

    What?

    +

    Route Matching Magic. It matches your routes ... magically!

    +
    +

    Clicking "Make Active" will reload the page. Pay attention to the routes.

    +
      +
    • uiRoute Info + IS + is NOT active. +
      • +
    • + Route {{ route }} + IS + is NOT active. + Make Active +
      • +
    +
    +
    + +
    +

    Why?

    +

    It would be nice if your app knew what the address path was and acted accordingly, right? Right.

    +
    + +
    +

    Options

    +
      +
    • Out of the box this directive ships with a boolean to determine if the route matches or not: $uiRoute. +
        +
      • Example Usage: <a ui-route="/page" ng-class="{active: $uiRoute}">link</a>
        • +
      +
      • +
    • Using ui-route as an attribute with value supports the following: +
        +
      • Static: <a ui-route="/page">
        • +
      • Regular Expression: <a ui-route="/page/[0-9]*">
        • +
      • Template Vars: <a ui-route="/page/{{ sample }}">
        • +
      • Template Vars && RegEx: <a ui-route="/page/{{ sample }}/[0-9]*">
        • +
      +
      • +
    • Using ui-route with ng-href attribute: +
        +
      • Static: <a ui-route ng-href="/page">
        • +
      • Template Vars: <a ui-route ng-href="/page/{{ sample }}">
        • +
      +
      • +
    • Using ui-route with href attribute: +
        +
      • Static Only: <a ui-route ng-href="/page">
        • +
      +
      • +
    +
    + +
    + +
    +
    +

    How?

    +
    +<ul>
+	<li ui-route="#/route-1">Route 1
+		<strong ui-if="$uiRoute">IS</strong>
+		<strong ui-if="!$uiRoute">is NOT</strong> active.
+	</li>
+	<li ui-route="#/route-2">Route 2
+		<strong ui-if="$uiRoute">IS</strong>
+		<strong ui-if="!$uiRoute">is NOT</strong> active.
+	</li>
+	<li ui-route="#/route-3">Route 3
+		<strong ui-if="$uiRoute">IS</strong>
+		<strong ui-if="!$uiRoute">is NOT</strong> active.
+	</li>
+</ul>
+
    +
    + +
    +
    diff --git a/js/app.js b/js/app.js index 0c0df3b..65685d6 100644 --- a/js/app.js +++ b/js/app.js @@ -159,6 +159,16 @@ function CurrencyCtrl($scope) { }; } +function RouteCtrl($scope, $window){ + $scope.sample = "{{ var }}" + $scope.reload = function($event, route){ + $event.preventDefault(); + $window.location.href = '#route-' + route; + document.location.reload(); + } + $scope.routes = [1,2,3]; +} + function FormatCtrl($scope) { $scope.sentence = 'Hello :name, how is the :subject? Are you on the $0, $1 or $2?'; $scope.mode = 'string'; From 1b70439ce97190807509e838b6a9a52aefa25410 Mon Sep 17 00:00:00 2001 From: Josey Morton Date: Mon, 11 Feb 2013 21:36:04 -0600 Subject: [PATCH 2/6] making scrolto work in firefox. closes #42 --- js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/app.js b/js/app.js index 65685d6..fa2c927 100644 --- a/js/app.js +++ b/js/app.js @@ -19,7 +19,7 @@ angular.module('demoApp', ['ui'], function($locationProvider) { attrs.scrollto = attrs.href; } var top = $(attrs.scrollto).offset().top; - $('body').animate({ scrollTop: top }, 800); + $('body,html').animate({ scrollTop: top }, 800); }); }; }]); From 89cebf958942a7b56037ba36ac77afb822359ffa Mon Sep 17 00:00:00 2001 From: Josey Morton Date: Tue, 12 Feb 2013 16:29:31 -0600 Subject: [PATCH 3/6] removing uiRoute directive --- index.html | 88 ------------------------------------------------------ js/app.js | 10 ------- 2 files changed, 98 deletions(-) diff --git a/index.html b/index.html index 506fa62..fde1d5a 100644 --- a/index.html +++ b/index.html @@ -77,7 +77,6 @@
  • Show / Hide / Toggle
  • TinyMCE
  • Currency
    • -
  • Route Matching
  • @@ -1028,93 +1027,6 @@

    How?

    - -
    -
    -

    Route Checking

    -
    - -
    -
    -

    What?

    -

    Route Matching Magic. It matches your routes ... magically!

    -
    -

    Clicking "Make Active" will reload the page. Pay attention to the routes.

    -
      -
    • uiRoute Info - IS - is NOT active. -
      • -
    • - Route {{ route }} - IS - is NOT active. - Make Active -
      • -
    -
    -
    - -
    -

    Why?

    -

    It would be nice if your app knew what the address path was and acted accordingly, right? Right.

    -
    - -
    -

    Options

    -
      -
    • Out of the box this directive ships with a boolean to determine if the route matches or not: $uiRoute. -
        -
      • Example Usage: <a ui-route="/page" ng-class="{active: $uiRoute}">link</a>
        • -
      -
      • -
    • Using ui-route as an attribute with value supports the following: -
        -
      • Static: <a ui-route="/page">
        • -
      • Regular Expression: <a ui-route="/page/[0-9]*">
        • -
      • Template Vars: <a ui-route="/page/{{ sample }}">
        • -
      • Template Vars && RegEx: <a ui-route="/page/{{ sample }}/[0-9]*">
        • -
      -
      • -
    • Using ui-route with ng-href attribute: -
        -
      • Static: <a ui-route ng-href="/page">
        • -
      • Template Vars: <a ui-route ng-href="/page/{{ sample }}">
        • -
      -
      • -
    • Using ui-route with href attribute: -
        -
      • Static Only: <a ui-route ng-href="/page">
        • -
      -
      • -
    -
    - -
    - -
    -
    -

    How?

    -
    -<ul>
-	<li ui-route="#/route-1">Route 1
-		<strong ui-if="$uiRoute">IS</strong>
-		<strong ui-if="!$uiRoute">is NOT</strong> active.
-	</li>
-	<li ui-route="#/route-2">Route 2
-		<strong ui-if="$uiRoute">IS</strong>
-		<strong ui-if="!$uiRoute">is NOT</strong> active.
-	</li>
-	<li ui-route="#/route-3">Route 3
-		<strong ui-if="$uiRoute">IS</strong>
-		<strong ui-if="!$uiRoute">is NOT</strong> active.
-	</li>
-</ul>
-
    -
    - -
    -
    diff --git a/js/app.js b/js/app.js index fa2c927..03ad995 100644 --- a/js/app.js +++ b/js/app.js @@ -159,16 +159,6 @@ function CurrencyCtrl($scope) { }; } -function RouteCtrl($scope, $window){ - $scope.sample = "{{ var }}" - $scope.reload = function($event, route){ - $event.preventDefault(); - $window.location.href = '#route-' + route; - document.location.reload(); - } - $scope.routes = [1,2,3]; -} - function FormatCtrl($scope) { $scope.sentence = 'Hello :name, how is the :subject? Are you on the $0, $1 or $2?'; $scope.mode = 'string'; From 6158628e08807dbd37b4fd8fcf69b4d4e58c99a0 Mon Sep 17 00:00:00 2001 From: Josey Morton Date: Tue, 12 Feb 2013 17:08:45 -0600 Subject: [PATCH 4/6] adding docs for v0.4.0 validate directive --- index.html | 1608 ++++++++++++++++++++++++++-------------------------- 1 file changed, 810 insertions(+), 798 deletions(-) diff --git a/index.html b/index.html index fde1d5a..84bc7c3 100644 --- a/index.html +++ b/index.html @@ -1,200 +1,200 @@ - AngularUI for AngularJS - - - - - - - - - - - - - - - - - - - - - - - - - - + AngularUI for AngularJS + + + + + + + + + + + + + + + + + + + + + + + + + + -
    -
    -
    -
    - - AngularUI - - - -
    -
    - - -
    -
    -
    -
    -
    - -
    -
    -

    - AngularUI -

    -

    The companion suite to the AngularJS framework.

    -

    - Code on Github DownloadCreate a Build -

    -
    -
    -
    -
      -
    • - -
      • -
    • - -
      • -
    • - - -
      • -
    • - -
      - - - -
      • -
    -
    -
    -
    - -
    - -

    - Check out the new - - Bootstrap Project - - by the AngularUI Team! -

    - -
    -

    Getting Started

    -

    Setup is easy and designed to be highly modular. Just follow these steps in order:

    -
      -
    1. Optional Include the Internet Explorer Shiv (read why here)
      2. -
    2. Optional Include jQuery if using jQuery Plugins
      3. -
    3. Optional Include any jQuery(UI) plugins you wish to use (plugins are not bundled with AngularUI)
      4. -
    4. Include AngularJS
      5. -
    5. Include AngularUI in one of the following ways: -
        -
      • Include the entire library (located in /build directory)
        • -
      • Include the /common/module.js and any directives or filters you wish to use
        • -
      • Create a custom build and include it
        • -
      -
      6. -
    6. Add the 'ui' module as a dependency: - 
      angular.module('myModule', ['ui'])
      -
      7. -
    7. Optional Setup your Global Defaults for plugins and directives
      8. -
    -
    - -
    -

    Global Defaults

    -
    -
    -

    You can specify default options for most AngularUI directives. This way you don't have to pass them every single time you call the directive. Passed options will be merged onto defaults, overriding any pre-existing keys.

    -

    Simply declare the global config on your module: module.value('ui.config', {}). Each directive should be namespaced by the directive name (without the ui- prefix).

    -
    -
    -

    Here's an example to make ui-select2 clearable by default:

    +
    +
    +
    +
    + + AngularUI + + + +
    +
    + + +
    +
    +
    +
    +
    + +
    +
    +

    + AngularUI +

    +

    The companion suite to the AngularJS framework.

    +

    + Code on Github DownloadCreate a Build +

    +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    • + + +
      • +
    • + +
      + + + +
      • +
    +
    +
    +
    + +
    + +

    + Check out the new + + Bootstrap Project + + by the AngularUI Team! +

    + +
    +

    Getting Started

    +

    Setup is easy and designed to be highly modular. Just follow these steps in order:

    +
      +
    1. Optional Include the Internet Explorer Shiv (read why here)
      2. +
    2. Optional Include jQuery if using jQuery Plugins
      3. +
    3. Optional Include any jQuery(UI) plugins you wish to use (plugins are not bundled with AngularUI)
      4. +
    4. Include AngularJS
      5. +
    5. Include AngularUI in one of the following ways: +
        +
      • Include the entire library (located in /build directory)
        • +
      • Include the /common/module.js and any directives or filters you wish to use
        • +
      • Create a custom build and include it
        • +
      +
      6. +
    6. Add the 'ui' module as a dependency: + 
      angular.module('myModule', ['ui'])
      +
      7. +
    7. Optional Setup your Global Defaults for plugins and directives
      8. +
    +
    + +
    +

    Global Defaults

    +
    +
    +

    You can specify default options for most AngularUI directives. This way you don't have to pass them every single time you call the directive. Passed options will be merged onto defaults, overriding any pre-existing keys.

    +

    Simply declare the global config on your module: module.value('ui.config', {}). Each directive should be namespaced by the directive name (without the ui- prefix).

    +
    +
    +

    Here's an example to make ui-select2 clearable by default:

     var myModule = angular.module('myModule', ['ui']);
 myModule.value('ui.config', {
@@ -203,23 +203,23 @@ 
    Global Defaults
    
    }
 });
    -
    -
    -
    +
    +
    +
    -
    -
    -

    IE Shiv shim or whatever you wanna call it

    -
    +
    +
    +

    IE Shiv shim or whatever you wanna call it

    +
    -

    Why?

    -

    In brief, custom tag elements (and thus directives that support them) like <ng-view> or <ui-currency> are ignored by IE 8 and older. Custom tags are cool because they are terse and give semantic to your awesome html5 app. AngularJS has provided a recipe for doing this, however, our solution saves you the fuss.

    +

    Why?

    +

    In brief, custom tag elements (and thus directives that support them) like <ng-view> or <ui-currency> are ignored by IE 8 and older. Custom tags are cool because they are terse and give semantic to your awesome html5 app. AngularJS has provided a recipe for doing this, however, our solution saves you the fuss.

    -

    How?

    -

    Below is how you would incorporate shiv by putting it into the <head> of your html code. For more, - see code page on github -

    +

    How?

    +

    Below is how you would incorporate shiv by putting it into the <head> of your html code. For more, + see code page on github + 

    <head>
 
 <!--[if lte IE 8]>
@@ -235,36 +235,36 @@ 
    How?
    
 <![endif]-->
 
 </head>
    -
    - -
    -
    -

    jQuery Passthrough

    -
    -
    -
    -

    What?

    -

    Call the jQuery function or plugin specified on the element.

    -

    This example shows how to call the bootstrap tooltip with almost no work:

    -
    -

    Hover over me for static Tooltip

    -

    - Fill the input for a dynamic Tooltip: - -

    -
    -
    -
    -

    Why?

    -

    Not every jQuery plugin requires creating a new directive just to use it. Instead, use the pass-through directive to rapidly port functionality. It is probably the best solution for 75% of the cases you will encounter.

    -

    If a plugin requires more robust integration with AngularJS then you may need to look into creating a custom directive instead, or contact us with a request.

    -
    -
    - -

    How?

    -

    To call something like $.fn.tooltip() simply do ui-jq="tooltip". Note that the name of the function must be identical. This also works for normal jQuery commands such as $.fn.slideUp().

    -

    To pass parameters use the ui-options attribute. The value will be evaluated in the $scope context and passed to the function. If defaults are set, the passed options will extend them. If a string is passed, the default options will be ignored.

    -

    Use the directive name jq for namespacing inside ui.config. Then sub-namespace options for each function by the name of that function (exactly as it is passed to ui-jq) so that you don't have to pass options every time you call the directive.

    +
    + +
    +
    +

    jQuery Passthrough

    +
    +
    +
    +

    What?

    +

    Call the jQuery function or plugin specified on the element.

    +

    This example shows how to call the bootstrap tooltip with almost no work:

    +
    +

    Hover over me for static Tooltip

    +

    + Fill the input for a dynamic Tooltip: + +

    +
    +
    +
    +

    Why?

    +

    Not every jQuery plugin requires creating a new directive just to use it. Instead, use the pass-through directive to rapidly port functionality. It is probably the best solution for 75% of the cases you will encounter.

    +

    If a plugin requires more robust integration with AngularJS then you may need to look into creating a custom directive instead, or contact us with a request.

    +
    +
    + +

    How?

    +

    To call something like $.fn.tooltip() simply do ui-jq="tooltip". Note that the name of the function must be identical. This also works for normal jQuery commands such as $.fn.slideUp().

    +

    To pass parameters use the ui-options attribute. The value will be evaluated in the $scope context and passed to the function. If defaults are set, the passed options will extend them. If a string is passed, the default options will be ignored.

    +

    Use the directive name jq for namespacing inside ui.config. Then sub-namespace options for each function by the name of that function (exactly as it is passed to ui-jq) so that you don't have to pass options every time you call the directive.

     <a title="Easiest. Binding. Ever!" ui-jq="tooltip">Hover over me for static Tooltip</a>
 
@@ -284,100 +284,100 @@ 
    How?
    
 });
 </script>
    -
    - -
    -
    -

    CodeMirror

    -
    -
    -
    -

    What?

    -

    IDE? In my textareas? Surely you're joking.

    -

    -
    -
    -

    How?

    +
    + +
    +
    +

    CodeMirror

    +
    +
    +
    +

    What?

    +

    IDE? In my textareas? Surely you're joking.

    +

    +
    +
    +

    How?

     <textarea ui-codemirror="{theme:'monokai'}" ng-model="codeMirrorModel"></textarea>
    -
    -
    -
    - -
    -
    -

    Event Binder

    -
    -
    -
    -

    What?

    -

    Bind a callback to any event not natively supported by Angular.

    -

    -

    Why?

    -

    For Blurs, Focus, Double-Clicks or any other event you may choose that isn't built-in.

    -
    -
    -

    How?

    -

    You can alternatively pass multiple events as an object:

    +
    +
    +
    + +
    +
    +

    Event Binder

    +
    +
    +
    +

    What?

    +

    Bind a callback to any event not natively supported by Angular.

    +

    +

    Why?

    +

    For Blurs, Focus, Double-Clicks or any other event you may choose that isn't built-in.

    +
    +
    +

    How?

    +

    You can alternatively pass multiple events as an object:

     <input ui-event="{ blur : 'blurCallback()' }">
 
 <script>
 $scope.blurCallback = function() {
-	alert('Goodbye');
+    alert('Goodbye');
 };
 </script>
    -
    -
    -
    - -
    -
    -

    Calendar

    -
    -
    -
    -
    -

    What?

    -

    Attach Angular objects to a calendar.

    -

    Why?

    -

    For easy integration with scope objects.

    -

    Click to add an Event!

    - - -
      -
    • -

      - {{e.title}} - x -

      -
      • -
    - -
    - -
    -
    -
    -

    How?

    - 
    +
    +
    +
    + +
    +
    +

    Calendar

    +
    +
    +
    +
    +

    What?

    +

    Attach Angular objects to a calendar.

    +

    Why?

    +

    For easy integration with scope objects.

    +

    Click to add an Event!

    + + +
      +
    • +

      + {{e.title}} + x +

      +
      • +
    + +
    + +
    +
    +
    +

    How?

    + 
     <div ui-calendar="{height: 450,editable: true}" class="span8 calendar" ng-model="events"></div> 
 
 function CalendarCtrl($scope) {
-	var date = new Date();
+    var date = new Date();
     var d = date.getDate();
     var m = date.getMonth();
     var y = date.getFullYear();
     
     $scope.events = [
-	  {title: 'All Day Event',start: new Date(y, m, 1)},
-	  {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
-	  {id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
-	  {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
-	  {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
-	  {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
+      {title: 'All Day Event',start: new Date(y, m, 1)},
+      {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
+      {id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
+      {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
+      {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
+      {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
     ]
 
     $scope.addChild = function() {
@@ -393,48 +393,48 @@ 
    How?
    
     }
 }
    -
    - -
    -
    -

    Google Maps

    -
    -
    -
    -
    -

    Click to add a marker!

    -

    {{zoomMessage}}

    - - - -
    -
    - -
    -

    Marker

    - Lat: , Lng: - Set Position -
    -
    +
    + +
    +
    +

    Google Maps

    +
    +
    +
    +
    +

    Click to add a marker!

    +

    {{zoomMessage}}

    + + + +
    +
    + +
    +

    Marker

    + Lat: , Lng: + Set Position +
    +
    -
    -
    -
    -
    -

    How?

    -

    Remember that you can pass a variable containing an object to ui-event

    +
    +
    + + +

    How?

    +

    Remember that you can pass a variable containing an object to ui-event

     <h4>Click to add a marker!</h4>
 <p>{{zoomMessage}}</p>
@@ -503,31 +503,31 @@ 
    How?
    
 }
 </style>
    -
    - -
    -
    -

    Date

    -
    -
    -
    -

    What?

    -

    Calendar picker with ng-model integration

    -
    - -

    -     -

    Selected Date: {{ date }}

    -

    Formatted Date: {{ date | date: 'mediumDate'}}

    -

    Selected Month: {{ date.getMonth() }}

    -
    -
    -
    -
    -

    Why?

    -

    Because you want to be able to update the calendar programmatically if it'a already open. Amongst other things

    - -

    How?

    +
    + +
    +
    +

    Date

    +
    +
    +
    +

    What?

    +

    Calendar picker with ng-model integration

    +
    + +

    +     +

    Selected Date: {{ date }}

    +

    Formatted Date: {{ date | date: 'mediumDate'}}

    +

    Selected Month: {{ date.getMonth() }}

    +
    +
    +
    +
    +

    Why?

    +

    Because you want to be able to update the calendar programmatically if it'a already open. Amongst other things

    + +

    How?

     <input ng-model="date" ui-date>
 Selected Date: {{ date }}
@@ -535,35 +535,35 @@ 
    How?
    
 Selected Month: {{ date.getMonth() }}
 <div ng-model="date" ui-date></div>
    -

    If ≤ IE8 make sure you have a polyfill for Date.toISOString()

    -
    -
    -
    - -
    -
    -

    Keypress

    -
    -
    -
    -

    What?

    -

    Bind an event to a particular keypress

    -

    -

    -

    -
    -
    -

    Why?

    -

    Cuz you feel like it? Maybe I should stop doing the 'Why' sections, running out of explanations...

    -

    How?

    -

    The directive takes a hash (object) with the key code as the key and the callback function to fire as the value. The callback function takes an 'event' param

    -

    Note that 13 represents the RETURN key code.

    +
    +
    +

    Why?

    +

    Cuz you feel like it? Maybe I should stop doing the 'Why' sections, running out of explanations...

    +

    How?

    +

    The directive takes a hash (object) with the key code as the key and the callback function to fire as the value. The callback function takes an 'event' param

    +

    Note that 13 represents the RETURN key code.

     <textarea
   ui-keypress="{13:'keypressCallback($event)'}">
@@ -577,84 +577,84 @@ 
    How?
    
 
 <script>
 $scope.keypressCallback = function($event) {
-	alert('Voila!');
-	$event.preventDefault();
+    alert('Voila!');
+    $event.preventDefault();
 };
 </script>
    -
    -
    -
    - -
    -
    -

    Mask

    -
    -

    What?

    -

    -

    -

    Mask model value: {{maskDemo}}

    - -

    How?

    -

    The most important thing you need to know is that this requires a specific version of the jQuery mask plugin.

    -

    You can find the correct version here: http://angular-ui.github.com/lib/maskedinput/jquery.maskedinput.js

    + + +
    + +
    +
    +

    Mask

    +
    +

    What?

    +

    +

    +

    Mask model value: {{maskDemo}}

    + +

    How?

    +

    The most important thing you need to know is that this requires a specific version of the jQuery mask plugin.

    +

    You can find the correct version here: http://angular-ui.github.com/lib/maskedinput/jquery.maskedinput.js

     <input ng-model="maskDemo" ui-mask="'99-99-9999'">
    -
    - -
    -
    -

    If

    -
    -
    -
    -

    What?

    -

    Remove elements from the DOM completely instead of just hiding it.

    -
    -

    Using ng-show

    -
      -
    • First
      • -
    • Middle
      • -
    • Last
      • -
    -

    Using ui-if

    -
      -
    • First
      • -
    • Middle
      • -
    • Last
      • -
    -
    -

    Why?

    -

    In situations where DOM traversal matters (such as the CSS selectors :first-child, :last-child and :nth()-child), simply hiding elements is not enough.

    -
    -
    - -

    How?

    +
    + +
    +
    +

    If

    +
    +
    +
    +

    What?

    +

    Remove elements from the DOM completely instead of just hiding it.

    +
    +

    Using ng-show

    +
      +
    • First
      • +
    • Middle
      • +
    • Last
      • +
    +

    Using ui-if

    +
      +
    • First
      • +
    • Middle
      • +
    • Last
      • +
    +
    +

    Why?

    +

    In situations where DOM traversal matters (such as the CSS selectors :first-child, :last-child and :nth()-child), simply hiding elements is not enough.

    +
    +
    + +

    How?

     <ul class="piped-list">
-	<li ui-if="false">First</li>
-	<li>Middle</li>
-	<li>Last</li>
+    <li ui-if="false">First</li>
+    <li>Middle</li>
+    <li>Last</li>
 </ul>
 
 <style>
 .piped-list li {
-	display: inline-block;
-	border-left: 2px solid;
-	margin-left: 5px;
-	padding-left: 10px;
+    display: inline-block;
+    border-left: 2px solid;
+    margin-left: 5px;
+    padding-left: 10px;
 }
 .piped-list li:first-child {
-	border-left: none;
-	margin-left: 0;
+    border-left: none;
+    margin-left: 0;
 }
 </style>
    -
    -
    -
    + + +
    @@ -668,7 +668,7 @@

    What?

    - + This e-mail is black-listed!
    is form valid: {{form.$valid}}
    email errors: {{form.email.$error | json}} @@ -680,13 +680,24 @@

    Why?

    How?

    Just add the 'ui-validate' directive to your input field.

    -

    2 types of syntax are supported:

      -
    • ui-validate="validateFoo"
      • -
    • ui-validate="{foo : validateFoo, bar : validateBar}"
      • +
    • Expressions and methods should be passed as strings: ui-validate="'method($value)'"
      • +
    • Methods should be passed the $value variable.
      • +
    • 2 types of syntax are supported: +
        +
      • ui-validate="'validateFoo($value)'"
        • +
      • ui-validate="{foo : 'validateFoo($value)', bar : 'validateBar($value)'}"
        • +
      +
      • +
    • The attribute ui-validate-watch can be used to watch another model and updates ui-validate whenever the passed model changes. +
        +
      • ui-validate-watch="'anotherModel'"
        • +
      • ui-validate-watch="{foo: 'anotherModel'}"
        • +
      + 
    -<input ng-model="email" ui-validate='{blacklist : notBlackListed}'>
+<input ng-model="email" ui-validate="{blacklist : 'notBlackListed($value)'}">
 <span ng-show='form.email.$error.blacklist'>This e-mail is black-listed!</span>
    and in a controller: @@ -700,24 +711,25 @@

    How?

    +
    -
    -
    -

    Reset

    -
    -
    -
    -

    What?

    -

    Adds an icon or link that empties the input element

    -

    Resets to empty:    

    -

    Resets to "Empty":

    -

    Remember that you control the CSS. Make the icon always show by changing the CSS to match the :hover state.

    -
    -
    -

    How?

    -

    You can set an app-wide reset value using ui.config

    +
    +
    +

    Reset

    +
    +
    +
    +

    What?

    +

    Adds an icon or link that empties the input element

    +

    Resets to empty:    

    +

    Resets to "Empty":

    +

    Remember that you control the CSS. Make the icon always show by changing the CSS to match the :hover state.

    +
    +
    +

    How?

    +

    You can set an app-wide reset value using ui.config

     <input ng-model="resetModel" ui-reset>
 <input ng-model="resetModel" ui-reset=" 'Empty' ">
@@ -726,31 +738,31 @@ 
    How?
    
 $scope.resetModel = 'Hover over me';
 </script>
    -
    -
    -
    - -
    -
    -

    Animate

    -
    -
    -
    -

    What?

    -

    Transition the injection of new DOM elements.

    -

    Support will later be added for transitioning the removal of DOM elements due to the complexity of this task.

    - Add Item -
      -
    • Item #{{$index+1}}
      • -
    - 
    $scope.items: {{items}}
    -

    Why?

    -

    People have been asking for a way to animate the addition and removal of DOM elements. This is a simple way of doing it using CSS3 transitions. A 'hidden' transitionable class (that doesn't use display:none) is attached to the node before it's injected and then immediately removed after.

    -
    -
    -

    How?

    -

    Add default state CSS and CSS3 transitions to the DOM elements you wish to ui-animate. Then apply your 'hidden' CSS to the .ui-animate state. The nodes will transition from your 'hidden' state to their default state. Refer to the CSS below as an example.

    -

    You can pass a string to use as an alternative class (such as ui-hide). Support for other options will be added in the future.

    +
    +
    +
    + +
    +
    +

    Animate

    +
    +
    +
    +

    What?

    +

    Transition the injection of new DOM elements.

    +

    Support will later be added for transitioning the removal of DOM elements due to the complexity of this task.

    + Add Item +
      +
    • Item #{{$index+1}}
      • +
    + 
    $scope.items: {{items}}
    +

    Why?

    +

    People have been asking for a way to animate the addition and removal of DOM elements. This is a simple way of doing it using CSS3 transitions. A 'hidden' transitionable class (that doesn't use display:none) is attached to the node before it's injected and then immediately removed after.

    +
    +
    +

    How?

    +

    Add default state CSS and CSS3 transitions to the DOM elements you wish to ui-animate. Then apply your 'hidden' CSS to the .ui-animate state. The nodes will transition from your 'hidden' state to their default state. Refer to the CSS below as an example.

    +

    You can pass a string to use as an alternative class (such as ui-hide). Support for other options will be added in the future.

     <a ng-click="items.push(true)">Add Item</a>
 <ul>
@@ -776,38 +788,38 @@ 
    How?
    
 }
 </style>
    -
    -
    -
    - -
    -
    -

    Modal

    -
    -
    -
    -

    What?

    -

    Takes the twitter bootstrap modal and lets you assign an ng-model to it. You can open/close the modal any way you want: data-* attributes, or use elm.modal('show'), or whatever. The ng-model you give will always correspond to whether the modal is opened or not, and if you set it it will also change the modal. -

    -

    -

    Modalin'!

    -
    -

    Cool beans, dude.

    -
    -
    - Close bootstrap way - Close ng-model way -
    -
    - Open Modal with ng-model
    - Open Modal with data-toggle="modal" -

    -

    Why?

    -

    We wanted to be able to open/close a modal programatically, so we stuck an ng-model onto the bootstrap modal and called it a day.

    -
    -
    -

    How?

    - 
    +
    +
    +
    + +
    +
    +

    Modal

    +
    +
    +
    +

    What?

    +

    Takes the twitter bootstrap modal and lets you assign an ng-model to it. You can open/close the modal any way you want: data-* attributes, or use elm.modal('show'), or whatever. The ng-model you give will always correspond to whether the modal is opened or not, and if you set it it will also change the modal. +

    +

    +

    Modalin'!

    +
    +

    Cool beans, dude.

    +
    +
    + Close bootstrap way + Close ng-model way +
    +
    + Open Modal with ng-model
    + Open Modal with data-toggle="modal" +

    +

    Why?

    +

    We wanted to be able to open/close a modal programatically, so we stuck an ng-model onto the bootstrap modal and called it a day.

    +
    +
    +

    How?

    + 
     <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
 <div ui-modal class="fade" ng-model="modalShown" id="myModal">
   Cool, a modal dialog!
@@ -816,103 +828,103 @@ 
    How?
    
 </div>
 <a ng-click="modalShown=true">Open 1</a>
 <a data-toggle="modal" href="#myModal">Open 2</a>
-
    -
    -
    -
    - -
    -
    -

    Scrollfix

    -
    -
    -
    -

    What?

    -

    Add a 'ui-fixed' class to elements when the page scrolls past them

    -
    -

    They see me scrollin...

    - Try scrolling past the red text or changing the offset -
    -
    -
    -

    Why?

    -

    Make elements sticky, or simply appear different after scrolling past a certain point

    -

    Remember that this directive only adds a ui-scrollfix class to the element. It is up to you to add the corresponding CSS rules, however it also gives you the ability to add other rules instead if you prefer.

    -
    -
    - -

    How?

    + +
    +
    +
    + +
    +
    +

    Scrollfix

    +
    +
    +
    +

    What?

    +

    Add a 'ui-fixed' class to elements when the page scrolls past them

    +
    +

    They see me scrollin...

    + Try scrolling past the red text or changing the offset +
    +
    +
    +

    Why?

    +

    Make elements sticky, or simply appear different after scrolling past a certain point

    +

    Remember that this directive only adds a ui-scrollfix class to the element. It is up to you to add the corresponding CSS rules, however it also gives you the ability to add other rules instead if you prefer.

    +
    +
    + +

    How?

    <p ui-scrollfix>They see me scrollin...</p>
    -

    You can optionally pass a number to ui-scrollfix which would override the detected y-offset of the element. Values can be either absolute 600 or offset from the calculated value -50 or +100.

    -
    - -
    -
    -

    Select2

    - Select2 is inspired by Chosen -
    -
    -
    -

    Demo

    -
    -

    Value is: {{select2}} (choose second)

    - -
    -
    -
    -

    Options

    -

    You can pass an object to Select2 as the expression: ui-select2="{allowClear:true}" that will be passed directly to $.fn.select2(). You can read more about the supported list of options and what they do on the Select2 Documentation Page. AngularUI will leverage properties passed to Select2 for any complex behavior, there are no parameters necessary for that are specific to AngularUI.

    -
    -
    -

    ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead

    -

    In order to properly support the Select2 placeholder, create an empty <option> tag at the top of the <select> and either set a data-placeholder on the select element or pass a placeholder option to Select2.

    - -

    How?

    +

    You can optionally pass a number to ui-scrollfix which would override the detected y-offset of the element. Values can be either absolute 600 or offset from the calculated value -50 or +100.

    +
    + +
    +
    +

    Select2

    + Select2 is inspired by Chosen +
    +
    +
    +

    Demo

    +
    +

    Value is: {{select2}} (choose second)

    + +
    +
    +
    +

    Options

    +

    You can pass an object to Select2 as the expression: ui-select2="{allowClear:true}" that will be passed directly to $.fn.select2(). You can read more about the supported list of options and what they do on the Select2 Documentation Page. AngularUI will leverage properties passed to Select2 for any complex behavior, there are no parameters necessary for that are specific to AngularUI.

    +
    +
    +

    ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead

    +

    In order to properly support the Select2 placeholder, create an empty <option> tag at the top of the <select> and either set a data-placeholder on the select element or pass a placeholder option to Select2.

    + +

    How?

     <p>Value is: {{select2}} <a ng-click="select2='two'">(choose second)</a></p>
 <select ui-select2 ng-model="select2">
-	<option value="">Pick a number</option>
-	<option value="one">First</option>
-	<option value="two">Second</option>
-	<option value="three">Third</option>
+    <option value="">Pick a number</option>
+    <option value="one">First</option>
+    <option value="two">Second</option>
+    <option value="three">Third</option>
 </select>

    Or try playing around with this sandbox demo to see how AJAX works

    -
    - -
    -
    -

    Show, Hide and Toggle Alternatives

    -
    -
    -
    -

    What?

    - -

    Instead of doing ng-show and ng-hide which simply sets display:block/none a ui-show and ui-hide class will be added which can give you tighter control over how things appear or disappear.

    -
    -

    Toggle State: {{!!showHideAn}}

    -

    - Show - Hide - Toggle -

    -
    -
    -
    -

    Why?

    -

    CSS3 transitions of course! Applying a class means you can specify exactly how these two states behave. In addition, the show/hide variants do not enforce css rules when they are false (unless you use toggle), so the default CSS can still apply.

    -
    But can't you just do ng-class="{ ui-show : someExpression }"?
    -

    ... shutup.

    -

    In all seriousness, this is just a convenience wrapper for using ng-class. This way you can simply swap out instances of ng for ui to immediately get your customized approach.

    -
    -
    - -

    How?

    +
    + +
    +
    +

    Show, Hide and Toggle Alternatives

    +
    +
    +
    +

    What?

    + +

    Instead of doing ng-show and ng-hide which simply sets display:block/none a ui-show and ui-hide class will be added which can give you tighter control over how things appear or disappear.

    +
    +

    Toggle State: {{!!showHideAn}}

    +

    + Show + Hide + Toggle +

    +
    +
    +
    +

    Why?

    +

    CSS3 transitions of course! Applying a class means you can specify exactly how these two states behave. In addition, the show/hide variants do not enforce css rules when they are false (unless you use toggle), so the default CSS can still apply.

    +
    But can't you just do ng-class="{ ui-show : someExpression }"?
    +

    ... shutup.

    +

    In all seriousness, this is just a convenience wrapper for using ng-class. This way you can simply swap out instances of ng for ui to immediately get your customized approach.

    +
    +
    + +

    How?

     <p><a ng-click="showHide=!showHide">Toggle State: {{!!showHide}}</a></p>
 <div ui-show="showHide">Show</div>
@@ -921,37 +933,37 @@ 
    How?
    
 
 <style>
 .ui-show {
-	color: blue;
-	transition: all 0.5s ease; // You should probably browser-prefix this
+    color: blue;
+    transition: all 0.5s ease; // You should probably browser-prefix this
 }
 .ui-hide {
-	opacity: 0;
-	transition: all 0.5s ease; // You should probably browser-prefix this
+    opacity: 0;
+    transition: all 0.5s ease; // You should probably browser-prefix this
 }
 </style>
    -

    Using ui-show or ui-hide will add a class of the same name when the expression is true.

    -

    Use ui-toggle if you want to leverage both classes, as ui-show will be added when true and ui-hide when false.

    -
    - -
    -
    -

    TinyMCE

    -
    -

    Demo disabled temporarily due to conflicts with other directives. Use at your own risk!

    -
    -
    -

    What?

    -

    TinyMCE WYSIWYG integration

    -
    - -

    Output:

    -

    {{tinymce}}

    -
    -
    -
    -

    How?

    -

    This example shows how you can use ui.config for greater convenience. You can still pass the configuration as the expression (even in addition to ui.config).

    +

    Using ui-show or ui-hide will add a class of the same name when the expression is true.

    +

    Use ui-toggle if you want to leverage both classes, as ui-show will be added when true and ui-hide when false.

    +
    + +
    +
    +

    TinyMCE

    +
    +

    Demo disabled temporarily due to conflicts with other directives. Use at your own risk!

    +
    +
    +

    What?

    +

    TinyMCE WYSIWYG integration

    +
    + +

    Output:

    +

    {{tinymce}}

    +
    +
    +
    +

    How?

    +

    This example shows how you can use ui.config for greater convenience. You can still pass the configuration as the expression (even in addition to ui.config).

     <textarea ui-tinymce ng-model="tinymce"></textarea>
 <p>{{tinymce}}</p>
@@ -964,37 +976,37 @@ 
    How?
    
 });
 </script>
    -
    -
    - - -
    - -
    -
    -

    Currency

    -
    -
    -
    -

    What?

    -

    Angular currencyFilter wrapper

    -
    - - - -
    -
    -
    -

    Why?

    -

    In angular, you are able to specify what the currency symbol is (however, you might not want to change it for localization). - This directive gives greater control over your currency elements by allowing you to set CSS styles based on the number's sign. -

    -
    -
    -
    -
    -

    How?

    -

    This example shows how you can use ui.config for greater convenience. You can still pass the configuration as the expression (even in addition to ui.config).

    +
    +
    + + +
    + +
    +
    +

    Currency

    +
    +
    +
    +

    What?

    +

    Angular currencyFilter wrapper

    +
    + + + +
    +
    +
    +

    Why?

    +

    In angular, you are able to specify what the currency symbol is (however, you might not want to change it for localization). + This directive gives greater control over your currency elements by allowing you to set CSS styles based on the number's sign. +

    +
    +
    +
    +
    +

    How?

    +

    This example shows how you can use ui.config for greater convenience. You can still pass the configuration as the expression (even in addition to ui.config).

     <span ui-currency ng-model="nums.pos"></span>
 <span ui-currency="{ symbol: '$', zero: 'my-zero-class'}" ng-model="nums.zero"></span>
@@ -1022,25 +1034,25 @@ 
    How?
    
 }
 </style>
    -
    -
    + + -
    + -
    -
    -

    Highlight

    -
    -

    What?

    -

    Easily highlight some text in a block

    -
    -

    -

    -

    -
    +
    +
    +

    Highlight

    +
    +

    What?

    +

    Easily highlight some text in a block

    +
    +

    +

    +

    +
    -

    How?

    +

    How?

     <label><input type="checkbox" ng-model="caseSensitive"> Case Sensitive?</label>
 <input placeholder="Enter some text to highlight" value="you" ng-model="highlightText">
@@ -1050,25 +1062,25 @@ 
    How?
    
 .ui-match { background: yellow; }
 </style>
    -
    - -
    -
    -

    Inflector

    -
    -

    What?

    -

    Converts a string to an alternative format.

    -
    -

    - - - -

    -

    -

    {{inflectorText|inflector:inflectorType}}

    -
    - -

    How?

    +
    + +
    +
    +

    Inflector

    +
    +

    What?

    +

    Converts a string to an alternative format.

    +
    +

    + + + +

    +

    +

    {{inflectorText|inflector:inflectorType}}

    +
    + +

    How?

     <label><input type="radio" value="humanize" ng-model="inflectorType"> Humanize (Default)</label>
 <label><input type="radio" value="underscore" ng-model="inflectorType"> Underscore</label>
@@ -1082,100 +1094,100 @@ 
    How?
    
 $scope.inflectorType = 'humanize';
 </script>
    -
    - -
    -
    -

    Unique

    -
    -
    -
    -

    What?

    -

    Filters out all duplicate objects items from an array by checking the specified key

    -
    -

    Select an attribute to check for uniqueness

    - - 
    {{items | unique:attribute | json}}
    -
    -
    -
    -

    How?

    -

    The filter can take the name of the key to check for uniqueness or set to a non-string truthy value to check the entire object.

    +
    + +
    +
    +

    Unique

    +
    +
    +
    +

    What?

    +

    Filters out all duplicate objects items from an array by checking the specified key

    +
    +

    Select an attribute to check for uniqueness

    + + 
    {{items | unique:attribute | json}}
    +
    +
    +
    +

    How?

    +

    The filter can take the name of the key to check for uniqueness or set to a non-string truthy value to check the entire object.

     <select ng-model="attribute">
-	<option value="">-- No Filter --</option>
-	<option>firstName</option>
-	<option>lastName</option>
-	<option>id</option>
-	<option>gender</option>
+    <option value="">-- No Filter --</option>
+    <option>firstName</option>
+    <option>lastName</option>
+    <option>id</option>
+    <option>gender</option>
 </select>
 <pre>{{items | unique:attribute | json}}</pre>
 
 <script>
 $scope.items = [
   { firstName: 'Dean', lastName: 'Sofer',
-	id: 1, gender: 'Male' },
+    id: 1, gender: 'Male' },
   { firstName: 'Dean', lastName: 'Kuntz',
-	id: 2, gender: 'Male' },
+    id: 2, gender: 'Male' },
   { firstName: 'Peter', lastName: 'Piper',
-	id: 3, gender: 'Female' },
+    id: 3, gender: 'Female' },
   { firstName: 'Peter', lastName: 'Darwin',
-	id: 4, gender: 'Male' },
+    id: 4, gender: 'Male' },
   { firstName: 'Janet', lastName: 'Piper',
-	id: 5, gender: 'Female' },
+    id: 5, gender: 'Female' },
   { firstName: 'Dan', lastName: 'Doyon',
-	id: 6, gender: 'Male' },
+    id: 6, gender: 'Male' },
   { firstName: 'Andy', lastName: 'Joslin',
-	id: 1, gender: 'Male' },
+    id: 1, gender: 'Male' },
 ];
 </script>
    -
    -
    -
    - -
    -
    -

    Format

    -
    -
    -
    -

    What?

    -

    Replace tokens in a string in a variety of ways

    -
    - - - - -

    {{ sentence | format : tokens[mode] }}

    - 
    Tokens: {{ tokens[mode] | json }}
    -
    -
    -
    -

    Why?

    -

    Most commonly, this filter is helpful for internationalization. However anywhere you need to do string replacement the format filter will come in handy.

    -

    How?

    +
    +
    +
    + +
    +
    +

    Format

    +
    +
    +
    +

    What?

    +

    Replace tokens in a string in a variety of ways

    +
    + + + + +

    {{ sentence | format : tokens[mode] }}

    + 
    Tokens: {{ tokens[mode] | json }}
    +
    +
    +
    +

    Why?

    +

    Most commonly, this filter is helpful for internationalization. However anywhere you need to do string replacement the format filter will come in handy.

    +

    How?

    {{ "Hello $0, how are you?" | format : 'Bob' }}
 -- or --
 $scope.tokens = ['first','second','third'];
@@ -1185,11 +1197,11 @@ 
    How?
    
 $scope.tokens = { name:'Bob', subject:'wife' };
 ...
 {{ "Hey :name, how's the :subject?" | format : tokens }}
    -
    -
    -
    - - + + +
    + + - - - - - - - - - - - - - - - - - - - - - - - - - + AngularUI for AngularJS + + + + + + + + + + + + + + + + + + + + + + + + + + -
    -
    -
    -
    - - AngularUI - - - -
    -
    - - -
    -
    +
    +
    +
    +
    + + AngularUI + + +
    -
    -
    - -
    -
    -

    - AngularUI -

    -

    The companion suite to the AngularJS framework.

    -

    - Code on Github DownloadCreate a Build -

    -
    -
    -
    -
      -
    • - -
      • -
    • - -
      • -
    • - - -
      • -
    • - -
      - - - -
      • -
    -
    -
    -
    - +
    + + +
    +
    +
    +
    +
    + +
    +
    +

    + AngularUI +

    +

    The companion suite to the AngularJS framework.

    +

    + Code on Github DownloadCreate a Build +

    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    • + + +
      • +
    • + +
      + + + +
      • +
    +
    +
    +
    -

    - Check out the new - - Bootstrap Project - - by the AngularUI Team! -

    - -
    -

    Getting Started

    -

    Setup is easy and designed to be highly modular. Just follow these steps in order:

    -
      -
    1. Optional Include the Internet Explorer Shiv (read why here)
      2. -
    2. Optional Include jQuery if using jQuery Plugins
      3. -
    3. Optional Include any jQuery(UI) plugins you wish to use (plugins are not bundled with AngularUI)
      4. -
    4. Include AngularJS
      5. -
    5. Include AngularUI in one of the following ways: -
        -
      • Include the entire library (located in /build directory)
        • -
      • Include the /common/module.js and any directives or filters you wish to use
        • -
      • Create a custom build and include it
        • -
      -
      6. -
    6. Add the 'ui' module as a dependency: - 
      angular.module('myModule', ['ui'])
      -
      7. -
    7. Optional Setup your Global Defaults for plugins and directives
      8. -
    -
    - -
    -

    Global Defaults

    -
    -
    -

    You can specify default options for most AngularUI directives. This way you don't have to pass them every single time you call the directive. Passed options will be merged onto defaults, overriding any pre-existing keys.

    -

    Simply declare the global config on your module: module.value('ui.config', {}). Each directive should be namespaced by the directive name (without the ui- prefix).

    -
    -
    -

    Here's an example to make ui-select2 clearable by default:

    +
    + +

    + Check out the new + + Bootstrap Project + + by the AngularUI Team! +

    + +
    +

    Getting Started

    +

    Setup is easy and designed to be highly modular. Just follow these steps in order:

    +
      +
    1. Optional Include the Internet Explorer Shiv (read why here)
      2. +
    2. Optional Include jQuery if using jQuery Plugins
      3. +
    3. Optional Include any jQuery(UI) plugins you wish to use (plugins are not bundled with AngularUI)
      4. +
    4. Include AngularJS
      5. +
    5. Include AngularUI in one of the following ways: +
        +
      • Include the entire library (located in /build directory)
        • +
      • Include the /common/module.js and any directives or filters you wish to use
        • +
      • Create a custom build and include it
        • +
      +
      6. +
    6. Add the 'ui' module as a dependency: + 
      angular.module('myModule', ['ui'])
      +
      7. +
    7. Optional Setup your Global Defaults for plugins and directives
      8. +
    +
    + +
    +

    Global Defaults

    +
    +
    +

    You can specify default options for most AngularUI directives. This way you don't have to pass them every single time you call the directive. Passed options will be merged onto defaults, overriding any pre-existing keys.

    +

    Simply declare the global config on your module: module.value('ui.config', {}). Each directive should be namespaced by the directive name (without the ui- prefix).

    +
    +
    +

    Here's an example to make ui-select2 clearable by default:

     var myModule = angular.module('myModule', ['ui']);
 myModule.value('ui.config', {
    select2: {
-      allowClear: true
+    allowClear: true
    }
 });
    -
    -
    -
    +
    +
    +
    -
    -
    -

    IE Shiv shim or whatever you wanna call it

    -
    +
    +
    +

    IE Shiv shim or whatever you wanna call it

    +
    -

    Why?

    -

    In brief, custom tag elements (and thus directives that support them) like <ng-view> or <ui-currency> are ignored by IE 8 and older. Custom tags are cool because they are terse and give semantic to your awesome html5 app. AngularJS has provided a recipe for doing this, however, our solution saves you the fuss.

    +

    Why?

    +

    In brief, custom tag elements (and thus directives that support them) like <ng-view> or <ui-currency> are ignored by IE 8 and older. Custom tags are cool because they are terse and give semantic to your awesome html5 app. AngularJS has provided a recipe for doing this, however, our solution saves you the fuss.

    -

    How?

    -

    Below is how you would incorporate shiv by putting it into the <head> of your html code. For more, - see code page on github -

    +

    How?

    +

    Below is how you would incorporate shiv by putting it into the <head> of your html code. For more, + see code page on github + 

    <head>
 
 <!--[if lte IE 8]>
-    <script>
-    // The ieshiv takes care of our ui.directives, bootstrap module directives and 
-    // AngularJS's ng-view, ng-include, ng-pluralize and ng-switch directives.
-    // However, IF you have custom directives (yours or someone else's) then
-    // enumerate the list of tags in window.myCustomTags
-
-    window.myCustomTags = [ 'yourDirective', 'somebodyElsesDirective' ]; // optional
-    </script>
-    <script src="build/angular-ui-ieshiv.js"></script>
+  <script>
+  // The ieshiv takes care of our ui.directives, bootstrap module directives and 
+  // AngularJS's ng-view, ng-include, ng-pluralize and ng-switch directives.
+  // However, IF you have custom directives (yours or someone else's) then
+  // enumerate the list of tags in window.myCustomTags
+
+  window.myCustomTags = [ 'yourDirective', 'somebodyElsesDirective' ]; // optional
+  </script>
+  <script src="build/angular-ui-ieshiv.js"></script>
 <![endif]-->
 
 </head>
    -
    +
    -
    -
    -

    jQuery Passthrough

    -
    -
    -
    -

    What?

    -

    Call the jQuery function or plugin specified on the element.

    -

    This example shows how to call the bootstrap tooltip with almost no work:

    -
    -

    Hover over me for static Tooltip

    -

    - Fill the input for a dynamic Tooltip: - -

    -
    -
    -
    -

    Why?

    -

    Not every jQuery plugin requires creating a new directive just to use it. Instead, use the pass-through directive to rapidly port functionality. It is probably the best solution for 75% of the cases you will encounter.

    -

    If a plugin requires more robust integration with AngularJS then you may need to look into creating a custom directive instead, or contact us with a request.

    -
    -
    +
    +
    +

    jQuery Passthrough

    +
    +
    +
    +

    What?

    +

    Call the jQuery function or plugin specified on the element.

    +

    This example shows how to call the bootstrap tooltip with almost no work:

    +
    +

    Hover over me for static Tooltip

    +

    + Fill the input for a dynamic Tooltip: + +

    +
    +
    +
    +

    Why?

    +

    Not every jQuery plugin requires creating a new directive just to use it. Instead, use the pass-through directive to rapidly port functionality. It is probably the best solution for 75% of the cases you will encounter.

    +

    If a plugin requires more robust integration with AngularJS then you may need to look into creating a custom directive instead, or contact us with a request.

    +
    +
    -

    How?

    -

    To call something like $.fn.tooltip() simply do ui-jq="tooltip". Note that the name of the function must be identical. This also works for normal jQuery commands such as $.fn.slideUp().

    -

    To pass parameters use the ui-options attribute. The value will be evaluated in the $scope context and passed to the function. If defaults are set, the passed options will extend them. If a string is passed, the default options will be ignored.

    -

    Use the directive name jq for namespacing inside ui.config. Then sub-namespace options for each function by the name of that function (exactly as it is passed to ui-jq) so that you don't have to pass options every time you call the directive.

    +

    How?

    +

    To call something like $.fn.tooltip() simply do ui-jq="tooltip". Note that the name of the function must be identical. This also works for normal jQuery commands such as $.fn.slideUp().

    +

    To pass parameters use the ui-options attribute. The value will be evaluated in the $scope context and passed to the function. If defaults are set, the passed options will extend them. If a string is passed, the default options will be ignored.

    +

    Use the directive name jq for namespacing inside ui.config. Then sub-namespace options for each function by the name of that function (exactly as it is passed to ui-jq) so that you don't have to pass options every time you call the directive.

     <a title="Easiest. Binding. Ever!" ui-jq="tooltip">Hover over me for static Tooltip</a>
 
@@ -275,172 +275,172 @@ 
    How?
    
 myModule.value('ui.config', {
    // The ui-jq directive namespace
    jq: {
-      // The Tooltip namespace
-      tooltip: {
-         // Tooltip options. This object will be used as the defaults
-         placement: 'right'
-      }
+    // The Tooltip namespace
+    tooltip: {
+     // Tooltip options. This object will be used as the defaults
+     placement: 'right'
+    }
    }
 });
 </script>
    -
    +
    -
    -
    -

    CodeMirror

    -
    -
    -
    -

    What?

    -

    IDE? In my textareas? Surely you're joking.

    -

    -
    -
    -

    How?

    +
    +
    +

    CodeMirror

    +
    +
    +
    +

    What?

    +

    IDE? In my textareas? Surely you're joking.

    +

    +
    +
    +

    How?

     <textarea ui-codemirror="{theme:'monokai'}" ng-model="codeMirrorModel"></textarea>
    -
    -
    -
    +
    +
    +
    -
    -
    -

    Event Binder

    -
    -
    -
    -

    What?

    -

    Bind a callback to any event not natively supported by Angular.

    -

    -

    Why?

    -

    For Blurs, Focus, Double-Clicks or any other event you may choose that isn't built-in.

    -
    -
    -

    How?

    -

    You can alternatively pass multiple events as an object:

    +
    +
    +

    Event Binder

    +
    +
    +
    +

    What?

    +

    Bind a callback to any event not natively supported by Angular.

    +

    +

    Why?

    +

    For Blurs, Focus, Double-Clicks or any other event you may choose that isn't built-in.

    +
    +
    +

    How?

    +

    You can alternatively pass multiple events as an object:

     <input ui-event="{ blur : 'blurCallback()' }">
 
 <script>
 $scope.blurCallback = function() {
-    alert('Goodbye');
+  alert('Goodbye');
 };
 </script>
    -
    -
    -
    +
    +
    +
    -
    -
    -

    Calendar

    -
    -
    -
    -
    -

    What?

    -

    Attach Angular objects to a calendar.

    -

    Why?

    -

    For easy integration with scope objects.

    -

    Click to add an Event!

    - - -
      -
    • -

      - {{e.title}} - x -

      -
      • -
    - -
    - -
    -
    -
    -

    How?

    - 
    +      
    
+        
    
+          
    Calendar
    
+        
    
+        
    
+          
    
+            
    
+              
    What?
    
+              
    Attach Angular objects to a calendar.
    
+              
    Why?
    
+              
    For easy integration with scope objects.
    
+              
    Click to add an Event!
    
+              
+              
+              
      
+                
    • 
+                  
      
+                    {{e.title}}
+                    x
+                  
      
+                
      • 
+              
    
+
+            
    
+
+            
    
+          
    
+        
    
+        
    How?
    
+        
     <div ui-calendar="{height: 450,editable: true}" class="span8 calendar" ng-model="events"></div> 
 
 function CalendarCtrl($scope) {
-    var date = new Date();
-    var d = date.getDate();
-    var m = date.getMonth();
-    var y = date.getFullYear();
-    
-    $scope.events = [
-      {title: 'All Day Event',start: new Date(y, m, 1)},
-      {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
-      {id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
-      {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
-      {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
-      {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
-    ]
-
-    $scope.addChild = function() {
-      $scope.events.push({
-        title: 'Open Sesame',
-        start: new Date(y, m, 28),
-        end: new Date(y, m, 29)
-      });
-    }
-
-    $scope.remove = function(index) {
-      $scope.events.splice(index,1);
-    }
+  var date = new Date();
+  var d = date.getDate();
+  var m = date.getMonth();
+  var y = date.getFullYear();
+  
+  $scope.events = [
+    {title: 'All Day Event',start: new Date(y, m, 1)},
+    {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
+    {id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
+    {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
+    {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
+    {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
+  ]
+
+  $scope.addChild = function() {
+    $scope.events.push({
+    title: 'Open Sesame',
+    start: new Date(y, m, 28),
+    end: new Date(y, m, 29)
+    });
+  }
+
+  $scope.remove = function(index) {
+    $scope.events.splice(index,1);
+  }
 }
 
    
-            
    
+
    -
    -
    -

    Google Maps

    -
    -
    -
    -
    -

    Click to add a marker!

    -

    {{zoomMessage}}

    - - - -
    -
    - -
    -

    Marker

    - Lat: , Lng: - Set Position -
    -
    - - -
    -
    -
    -
    -

    How?

    -

    Remember that you can pass a variable containing an object to ui-event

    +
    +
    +

    Google Maps

    +
    +
    +
    +
    +

    Click to add a marker!

    +

    {{zoomMessage}}

    + + + +
    +
    + +
    +

    Marker

    + Lat: , Lng: + Set Position +
    +
    + + +
    +
    +
    +
    +

    How?

    +

    Remember that you can pass a variable containing an object to ui-event

     <h4>Click to add a marker!</h4>
 <p>{{zoomMessage}}</p>
 <ul>
   <li ng-repeat="marker in myMarkers">
-    <a ng-click="myMap.panTo(marker.getPosition())">Pan to Marker {{$index}}</a>
+  <a ng-click="myMap.panTo(marker.getPosition())">Pan to Marker {{$index}}</a>
   </li>
 </ul>
 
@@ -474,8 +474,8 @@ 
    How?
    
 
 $scope.addMarker = function($event) {
   $scope.myMarkers.push(new google.maps.Marker({
-    map: $scope.myMap,
-    position: $event.latLng
+  map: $scope.myMap,
+  position: $event.latLng
   }));
 };
 
@@ -503,31 +503,31 @@ 
    How?
    
 }
 </style>
    -
    +
    -
    -
    -

    Date

    -
    -
    -
    -

    What?

    -

    Calendar picker with ng-model integration

    -
    - -

    -     -

    Selected Date: {{ date }}

    -

    Formatted Date: {{ date | date: 'mediumDate'}}

    -

    Selected Month: {{ date.getMonth() }}

    -
    -
    -
    -
    -

    Why?

    -

    Because you want to be able to update the calendar programmatically if it'a already open. Amongst other things

    - -

    How?

    +
    +
    +

    Date

    +
    +
    +
    +

    What?

    +

    Calendar picker with ng-model integration

    +
    + +

    +     +

    Selected Date: {{ date }}

    +

    Formatted Date: {{ date | date: 'mediumDate'}}

    +

    Selected Month: {{ date.getMonth() }}

    +
    +
    +
    +
    +

    Why?

    +

    Because you want to be able to update the calendar programmatically if it'a already open. Amongst other things

    + +

    How?

     <input ng-model="date" ui-date>
 Selected Date: {{ date }}
@@ -535,35 +535,35 @@ 
    How?
    
 Selected Month: {{ date.getMonth() }}
 <div ng-model="date" ui-date></div>
    -

    If ≤ IE8 make sure you have a polyfill for Date.toISOString()

    -
    -
    -
    +

    If ≤ IE8 make sure you have a polyfill for Date.toISOString()

    +
    +
    +
    -
    -
    -

    Keypress

    -
    -
    -
    -

    What?

    -

    Bind an event to a particular keypress

    -

    -

    -

    -
    -
    -

    Why?

    -

    Cuz you feel like it? Maybe I should stop doing the 'Why' sections, running out of explanations...

    -

    How?

    -

    The directive takes a hash (object) with the key code as the key and the callback function to fire as the value. The callback function takes an 'event' param

    -

    Note that 13 represents the RETURN key code.

    +
    +
    +

    Why?

    +

    Cuz you feel like it? Maybe I should stop doing the 'Why' sections, running out of explanations...

    +

    How?

    +

    The directive takes a hash (object) with the key code as the key and the callback function to fire as the value. The callback function takes an 'event' param

    +

    Note that 13 represents the RETURN key code.

     <textarea
   ui-keypress="{13:'keypressCallback($event)'}">
@@ -577,159 +577,159 @@ 
    How?
    
 
 <script>
 $scope.keypressCallback = function($event) {
-    alert('Voila!');
-    $event.preventDefault();
+  alert('Voila!');
+  $event.preventDefault();
 };
 </script>
    -
    -
    -
    +
    + + -
    -
    -

    Mask

    -
    -

    What?

    -

    -

    -

    Mask model value: {{maskDemo}}

    - -

    How?

    -

    The most important thing you need to know is that this requires a specific version of the jQuery mask plugin.

    -

    You can find the correct version here: http://angular-ui.github.com/lib/maskedinput/jquery.maskedinput.js

    +
    +
    +

    Mask

    +
    +

    What?

    +

    +

    +

    Mask model value: {{maskDemo}}

    + +

    How?

    +

    The most important thing you need to know is that this requires a specific version of the jQuery mask plugin.

    +

    You can find the correct version here: http://angular-ui.github.com/lib/maskedinput/jquery.maskedinput.js

     <input ng-model="maskDemo" ui-mask="'99-99-9999'">
    -
    +
    -
    -
    -

    If

    -
    -
    -
    -

    What?

    -

    Remove elements from the DOM completely instead of just hiding it.

    -
    -

    Using ng-show

    -
      -
    • First
      • -
    • Middle
      • -
    • Last
      • -
    -

    Using ui-if

    -
      -
    • First
      • -
    • Middle
      • -
    • Last
      • -
    -
    -

    Why?

    -

    In situations where DOM traversal matters (such as the CSS selectors :first-child, :last-child and :nth()-child), simply hiding elements is not enough.

    -
    -
    - -

    How?

    +
    +
    +

    If

    +
    +
    +
    +

    What?

    +

    Remove elements from the DOM completely instead of just hiding it.

    +
    +

    Using ng-show

    +
      +
    • First
      • +
    • Middle
      • +
    • Last
      • +
    +

    Using ui-if

    +
      +
    • First
      • +
    • Middle
      • +
    • Last
      • +
    +
    +

    Why?

    +

    In situations where DOM traversal matters (such as the CSS selectors :first-child, :last-child and :nth()-child), simply hiding elements is not enough.

    +
    +
    + +

    How?

     <ul class="piped-list">
-    <li ui-if="false">First</li>
-    <li>Middle</li>
-    <li>Last</li>
+  <li ui-if="false">First</li>
+  <li>Middle</li>
+  <li>Last</li>
 </ul>
 
 <style>
 .piped-list li {
-    display: inline-block;
-    border-left: 2px solid;
-    margin-left: 5px;
-    padding-left: 10px;
+  display: inline-block;
+  border-left: 2px solid;
+  margin-left: 5px;
+  padding-left: 10px;
 }
 .piped-list li:first-child {
-    border-left: none;
-    margin-left: 0;
+  border-left: none;
+  margin-left: 0;
 }
 </style>
    -
    -
    -
    +
    +
    +
    -
    -
    -

    Validate

    -
    -
    -
    -

    What?

    -

    The ui-validate directive makes it very easy to use any function as a validation function for input elements using ngModel.

    -
    - - - - - This e-mail is black-listed! -
    is form valid: {{form.$valid}} -
    email errors: {{form.email.$error | json}} - -
    -

    Why?

    -

    AngularJS comes with several built-in validation mechanism for input fields (ngRequired, ngPattern etc.) but using an arbitrary validation function requires creation of custom formatters and / or parsers. The ui-validate directive makes it easy to use any function(s) defined in scope as a validator function(s).

    -
    -
    -

    How?

    -

    Just add the 'ui-validate' directive to your input field.

    -
      -
    • Expressions and methods should be passed as strings: ui-validate="'method($value)'"
      • -
    • Methods should be passed the $value variable.
      • -
    • 2 types of syntax are supported: -
        -
      • ui-validate="'validateFoo($value)'"
        • -
      • ui-validate="{foo : 'validateFoo($value)', bar : 'validateBar($value)'}"
        • -
      -
      • -
    • The attribute ui-validate-watch can be used to watch another model and updates ui-validate whenever the passed model changes. -
        -
      • ui-validate-watch="'anotherModel'"
        • -
      • ui-validate-watch="{foo: 'anotherModel'}"
        • -
      -
      • -
    +
    +
    +

    Validate

    +
    +
    +
    +

    What?

    +

    The ui-validate directive makes it very easy to use any function as a validation function for input elements using ngModel.

    +
    +
    + + + + This e-mail is black-listed! +
    is form valid: {{form.$valid}} +
    email errors: {{form.email.$error | json}} +
    +
    +

    Why?

    +

    AngularJS comes with several built-in validation mechanism for input fields (ngRequired, ngPattern etc.) but using an arbitrary validation function requires creation of custom formatters and / or parsers. The ui-validate directive makes it easy to use any function(s) defined in scope as a validator function(s).

    +
    +
    +

    How?

    +

    Just add the 'ui-validate' directive to your input field.

    +
      +
    • Expressions and methods should be passed as strings: ui-validate="'method($value)'"
      • +
    • Methods should be passed the $value variable.
      • +
    • 2 types of syntax are supported: +
        +
      • ui-validate="'validateFoo($value)'"
        • +
      • ui-validate="{foo : 'validateFoo($value)', bar : 'validateBar($value)'}"
        • +
      +
      • +
    • The attribute ui-validate-watch can be used to watch another model and updates ui-validate whenever the passed model changes. +
        +
      • ui-validate-watch="'anotherModel'"
        • +
      • ui-validate-watch="{foo: 'anotherModel'}"
        • +
      +
      • + 
     <input ng-model="email" ui-validate="{blacklist : 'notBlackListed($value)'}">
 <span ng-show='form.email.$error.blacklist'>This e-mail is black-listed!</span>
    - and in a controller: + and in a controller: 
     function ValidateCtrl($scope) {
   $scope.blackList = ['bad@domain.com','verybad@domain.com'];
   $scope.notBlackListed = function(value) {
-    return $scope.blackList.indexOf(value) === -1;
+  return $scope.blackList.indexOf(value) === -1;
   };
 }
    -

    -
    +

    +
    -
    -
    + + -
    -
    -

    Reset

    -
    -
    -
    -

    What?

    -

    Adds an icon or link that empties the input element

    -

    Resets to empty:    

    -

    Resets to "Empty":

    -

    Remember that you control the CSS. Make the icon always show by changing the CSS to match the :hover state.

    -
    -
    -

    How?

    -

    You can set an app-wide reset value using ui.config

    +
    +
    +

    Reset

    +
    +
    +
    +

    What?

    +

    Adds an icon or link that empties the input element

    +

    Resets to empty:    

    +

    Resets to "Empty":

    +

    Remember that you control the CSS. Make the icon always show by changing the CSS to match the :hover state.

    +
    +
    +

    How?

    +

    You can set an app-wide reset value using ui.config

     <input ng-model="resetModel" ui-reset>
 <input ng-model="resetModel" ui-reset=" 'Empty' ">
@@ -738,31 +738,31 @@ 
    How?
    
 $scope.resetModel = 'Hover over me';
 </script>
    -
    -
    -
    +
    +
    +
    -
    -
    -

    Animate

    -
    -
    -
    -

    What?

    -

    Transition the injection of new DOM elements.

    -

    Support will later be added for transitioning the removal of DOM elements due to the complexity of this task.

    - Add Item -
      -
    • Item #{{$index+1}}
      • -
    - 
    $scope.items: {{items}}
    -

    Why?

    -

    People have been asking for a way to animate the addition and removal of DOM elements. This is a simple way of doing it using CSS3 transitions. A 'hidden' transitionable class (that doesn't use display:none) is attached to the node before it's injected and then immediately removed after.

    -
    -
    -

    How?

    -

    Add default state CSS and CSS3 transitions to the DOM elements you wish to ui-animate. Then apply your 'hidden' CSS to the .ui-animate state. The nodes will transition from your 'hidden' state to their default state. Refer to the CSS below as an example.

    -

    You can pass a string to use as an alternative class (such as ui-hide). Support for other options will be added in the future.

    +
    +
    +

    Animate

    +
    +
    +
    +

    What?

    +

    Transition the injection of new DOM elements.

    +

    Support will later be added for transitioning the removal of DOM elements due to the complexity of this task.

    + Add Item +
      +
    • Item #{{$index+1}}
      • +
    + 
    $scope.items: {{items}}
    +

    Why?

    +

    People have been asking for a way to animate the addition and removal of DOM elements. This is a simple way of doing it using CSS3 transitions. A 'hidden' transitionable class (that doesn't use display:none) is attached to the node before it's injected and then immediately removed after.

    +
    +
    +

    How?

    +

    Add default state CSS and CSS3 transitions to the DOM elements you wish to ui-animate. Then apply your 'hidden' CSS to the .ui-animate state. The nodes will transition from your 'hidden' state to their default state. Refer to the CSS below as an example.

    +

    You can pass a string to use as an alternative class (such as ui-hide). Support for other options will be added in the future.

     <a ng-click="items.push(true)">Add Item</a>
 <ul>
@@ -788,38 +788,38 @@ 
    How?
    
 }
 </style>
    -
    -
    -
    +
    +
    +
    -
    -
    -

    Modal

    +
    +
    +

    Modal

    +
    +
    +
    +

    What?

    +

    Takes the twitter bootstrap modal and lets you assign an ng-model to it. You can open/close the modal any way you want: data-* attributes, or use elm.modal('show'), or whatever. The ng-model you give will always correspond to whether the modal is opened or not, and if you set it it will also change the modal. +

    +

    +

    Modalin'!

    +
    +

    Cool beans, dude.

    -
    -
    -

    What?

    -

    Takes the twitter bootstrap modal and lets you assign an ng-model to it. You can open/close the modal any way you want: data-* attributes, or use elm.modal('show'), or whatever. The ng-model you give will always correspond to whether the modal is opened or not, and if you set it it will also change the modal. -

    -

    -

    Modalin'!

    -
    -

    Cool beans, dude.

    -
    -
    - Close bootstrap way - Close ng-model way -
    -
    - Open Modal with ng-model
    - Open Modal with data-toggle="modal" -

    -

    Why?

    -

    We wanted to be able to open/close a modal programatically, so we stuck an ng-model onto the bootstrap modal and called it a day.

    -
    -
    -

    How?

    - 
    +                
    
+                  Close bootstrap way
+                  Close ng-model way
+                
    
+
    + Open Modal with ng-model
    + Open Modal with data-toggle="modal" +

    +

    Why?

    +

    We wanted to be able to open/close a modal programatically, so we stuck an ng-model onto the bootstrap modal and called it a day.

    +
    +
    +

    How?

    + 
     <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
 <div ui-modal class="fade" ng-model="modalShown" id="myModal">
   Cool, a modal dialog!
@@ -828,103 +828,103 @@ 
    How?
    
 </div>
 <a ng-click="modalShown=true">Open 1</a>
 <a data-toggle="modal" href="#myModal">Open 2</a>
-
    -
    -
    -
    + +
    + +
    -
    -
    -

    Scrollfix

    -
    -
    -
    -

    What?

    -

    Add a 'ui-fixed' class to elements when the page scrolls past them

    -
    -

    They see me scrollin...

    - Try scrolling past the red text or changing the offset -
    -
    -
    -

    Why?

    -

    Make elements sticky, or simply appear different after scrolling past a certain point

    -

    Remember that this directive only adds a ui-scrollfix class to the element. It is up to you to add the corresponding CSS rules, however it also gives you the ability to add other rules instead if you prefer.

    -
    -
    +
    +
    +

    Scrollfix

    +
    +
    +
    +

    What?

    +

    Add a 'ui-fixed' class to elements when the page scrolls past them

    +
    +

    They see me scrollin...

    + Try scrolling past the red text or changing the offset +
    +
    +
    +

    Why?

    +

    Make elements sticky, or simply appear different after scrolling past a certain point

    +

    Remember that this directive only adds a ui-scrollfix class to the element. It is up to you to add the corresponding CSS rules, however it also gives you the ability to add other rules instead if you prefer.

    +
    +
    -

    How?

    +

    How?

    <p ui-scrollfix>They see me scrollin...</p>
    -

    You can optionally pass a number to ui-scrollfix which would override the detected y-offset of the element. Values can be either absolute 600 or offset from the calculated value -50 or +100.

    -
    +

    You can optionally pass a number to ui-scrollfix which would override the detected y-offset of the element. Values can be either absolute 600 or offset from the calculated value -50 or +100.

    +
    -
    -
    -

    Select2

    - Select2 is inspired by Chosen -
    -
    -
    -

    Demo

    -
    -

    Value is: {{select2}} (choose second)

    - -
    -
    -
    -

    Options

    -

    You can pass an object to Select2 as the expression: ui-select2="{allowClear:true}" that will be passed directly to $.fn.select2(). You can read more about the supported list of options and what they do on the Select2 Documentation Page. AngularUI will leverage properties passed to Select2 for any complex behavior, there are no parameters necessary for that are specific to AngularUI.

    -
    -
    -

    ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead

    -

    In order to properly support the Select2 placeholder, create an empty <option> tag at the top of the <select> and either set a data-placeholder on the select element or pass a placeholder option to Select2.

    +
    +
    +

    Select2

    + Select2 is inspired by Chosen +
    +
    +
    +

    Demo

    +
    +

    Value is: {{select2}} (choose second)

    + +
    +
    +
    +

    Options

    +

    You can pass an object to Select2 as the expression: ui-select2="{allowClear:true}" that will be passed directly to $.fn.select2(). You can read more about the supported list of options and what they do on the Select2 Documentation Page. AngularUI will leverage properties passed to Select2 for any complex behavior, there are no parameters necessary for that are specific to AngularUI.

    +
    +
    +

    ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead

    +

    In order to properly support the Select2 placeholder, create an empty <option> tag at the top of the <select> and either set a data-placeholder on the select element or pass a placeholder option to Select2.

    -

    How?

    +

    How?

     <p>Value is: {{select2}} <a ng-click="select2='two'">(choose second)</a></p>
 <select ui-select2 ng-model="select2">
-    <option value="">Pick a number</option>
-    <option value="one">First</option>
-    <option value="two">Second</option>
-    <option value="three">Third</option>
+  <option value="">Pick a number</option>
+  <option value="one">First</option>
+  <option value="two">Second</option>
+  <option value="three">Third</option>
 </select>

    Or try playing around with this sandbox demo to see how AJAX works

    -
    +
    -
    -
    -

    Show, Hide and Toggle Alternatives

    -
    -
    -
    -

    What?

    - -

    Instead of doing ng-show and ng-hide which simply sets display:block/none a ui-show and ui-hide class will be added which can give you tighter control over how things appear or disappear.

    -
    -

    Toggle State: {{!!showHideAn}}

    -

    - Show - Hide - Toggle -

    -
    -
    -
    -

    Why?

    -

    CSS3 transitions of course! Applying a class means you can specify exactly how these two states behave. In addition, the show/hide variants do not enforce css rules when they are false (unless you use toggle), so the default CSS can still apply.

    -
    But can't you just do ng-class="{ ui-show : someExpression }"?
    -

    ... shutup.

    -

    In all seriousness, this is just a convenience wrapper for using ng-class. This way you can simply swap out instances of ng for ui to immediately get your customized approach.

    -
    -
    +
    +
    +

    Show, Hide and Toggle Alternatives

    +
    +
    +
    +

    What?

    + +

    Instead of doing ng-show and ng-hide which simply sets display:block/none a ui-show and ui-hide class will be added which can give you tighter control over how things appear or disappear.

    +
    +

    Toggle State: {{!!showHideAn}}

    +

    + Show + Hide + Toggle +

    +
    +
    +
    +

    Why?

    +

    CSS3 transitions of course! Applying a class means you can specify exactly how these two states behave. In addition, the show/hide variants do not enforce css rules when they are false (unless you use toggle), so the default CSS can still apply.

    +
    But can't you just do ng-class="{ ui-show : someExpression }"?
    +

    ... shutup.

    +

    In all seriousness, this is just a convenience wrapper for using ng-class. This way you can simply swap out instances of ng for ui to immediately get your customized approach.

    +
    +
    -

    How?

    +

    How?

     <p><a ng-click="showHide=!showHide">Toggle State: {{!!showHide}}</a></p>
 <div ui-show="showHide">Show</div>
@@ -933,37 +933,37 @@ 
    How?
    
 
 <style>
 .ui-show {
-    color: blue;
-    transition: all 0.5s ease; // You should probably browser-prefix this
+  color: blue;
+  transition: all 0.5s ease; // You should probably browser-prefix this
 }
 .ui-hide {
-    opacity: 0;
-    transition: all 0.5s ease; // You should probably browser-prefix this
+  opacity: 0;
+  transition: all 0.5s ease; // You should probably browser-prefix this
 }
 </style>
    -

    Using ui-show or ui-hide will add a class of the same name when the expression is true.

    -

    Use ui-toggle if you want to leverage both classes, as ui-show will be added when true and ui-hide when false.

    -
    +

    Using ui-show or ui-hide will add a class of the same name when the expression is true.

    +

    Use ui-toggle if you want to leverage both classes, as ui-show will be added when true and ui-hide when false.

    +
    -
    -
    -

    TinyMCE

    -
    -

    Demo disabled temporarily due to conflicts with other directives. Use at your own risk!

    -
    -
    -

    What?

    -

    TinyMCE WYSIWYG integration

    -
    - -

    Output:

    -

    {{tinymce}}

    -
    -
    -
    -

    How?

    -

    This example shows how you can use ui.config for greater convenience. You can still pass the configuration as the expression (even in addition to ui.config).

    +
    +
    +

    TinyMCE

    +
    +

    Demo disabled temporarily due to conflicts with other directives. Use at your own risk!

    +
    +
    +

    What?

    +

    TinyMCE WYSIWYG integration

    +
    + +

    Output:

    +

    {{tinymce}}

    +
    +
    +
    +

    How?

    +

    This example shows how you can use ui.config for greater convenience. You can still pass the configuration as the expression (even in addition to ui.config).

     <textarea ui-tinymce ng-model="tinymce"></textarea>
 <p>{{tinymce}}</p>
@@ -971,42 +971,42 @@ 
    How?
    
 <script>
 myModule.value('ui.config', {
    tinymce: {
-      theme: 'simple',
+    theme: 'simple',
    }
 });
 </script>
    -
    -
    +
    +
    -
    + -
    -
    -

    Currency

    -
    -
    -
    -

    What?

    -

    Angular currencyFilter wrapper

    -
    - - - -
    -
    -
    -

    Why?

    -

    In angular, you are able to specify what the currency symbol is (however, you might not want to change it for localization). - This directive gives greater control over your currency elements by allowing you to set CSS styles based on the number's sign. -

    -
    -
    -
    -
    -

    How?

    -

    This example shows how you can use ui.config for greater convenience. You can still pass the configuration as the expression (even in addition to ui.config).

    +
    +
    +

    Currency

    +
    +
    +
    +

    What?

    +

    Angular currencyFilter wrapper

    +
    + + + +
    +
    +
    +

    Why?

    +

    In angular, you are able to specify what the currency symbol is (however, you might not want to change it for localization). + This directive gives greater control over your currency elements by allowing you to set CSS styles based on the number's sign. +

    +
    +
    +
    +
    +

    How?

    +

    This example shows how you can use ui.config for greater convenience. You can still pass the configuration as the expression (even in addition to ui.config).

     <span ui-currency ng-model="nums.pos"></span>
 <span ui-currency="{ symbol: '$', zero: 'my-zero-class'}" ng-model="nums.zero"></span>
@@ -1015,7 +1015,7 @@ 
    How?
    
 <script>
 myModule.value('ui.config', {
    currency: {
-      symbol: 'USD$',
+    symbol: 'USD$',
    }
 });
 </script>
@@ -1034,25 +1034,25 @@ 
    How?
    
 }
 </style>
    -
    -
    +
    +
    -
    + -
    -
    -

    Highlight

    -
    -

    What?

    -

    Easily highlight some text in a block

    -
    -

    -

    -

    -
    +
    +
    +

    Highlight

    +
    +

    What?

    +

    Easily highlight some text in a block

    +
    +

    +

    +

    +
    -

    How?

    +

    How?

     <label><input type="checkbox" ng-model="caseSensitive"> Case Sensitive?</label>
 <input placeholder="Enter some text to highlight" value="you" ng-model="highlightText">
@@ -1062,25 +1062,25 @@ 
    How?
    
 .ui-match { background: yellow; }
 </style>
    -
    +
    -
    -
    -

    Inflector

    -
    -

    What?

    -

    Converts a string to an alternative format.

    -
    -

    - - - -

    -

    -

    {{inflectorText|inflector:inflectorType}}

    -
    +
    +
    +

    Inflector

    +
    +

    What?

    +

    Converts a string to an alternative format.

    +
    +

    + + + +

    +

    +

    {{inflectorText|inflector:inflectorType}}

    +
    -

    How?

    +

    How?

     <label><input type="radio" value="humanize" ng-model="inflectorType"> Humanize (Default)</label>
 <label><input type="radio" value="underscore" ng-model="inflectorType"> Underscore</label>
@@ -1094,100 +1094,100 @@ 
    How?
    
 $scope.inflectorType = 'humanize';
 </script>
    -
    +
    -
    -
    -

    Unique

    -
    -
    -
    -

    What?

    -

    Filters out all duplicate objects items from an array by checking the specified key

    -
    -

    Select an attribute to check for uniqueness

    - - 
    {{items | unique:attribute | json}}
    -
    -
    -
    -

    How?

    -

    The filter can take the name of the key to check for uniqueness or set to a non-string truthy value to check the entire object.

    +
    +
    +

    Unique

    +
    +
    +
    +

    What?

    +

    Filters out all duplicate objects items from an array by checking the specified key

    +
    +

    Select an attribute to check for uniqueness

    + + 
    {{items | unique:attribute | json}}
    +
    +
    +
    +

    How?

    +

    The filter can take the name of the key to check for uniqueness or set to a non-string truthy value to check the entire object.

     <select ng-model="attribute">
-    <option value="">-- No Filter --</option>
-    <option>firstName</option>
-    <option>lastName</option>
-    <option>id</option>
-    <option>gender</option>
+  <option value="">-- No Filter --</option>
+  <option>firstName</option>
+  <option>lastName</option>
+  <option>id</option>
+  <option>gender</option>
 </select>
 <pre>{{items | unique:attribute | json}}</pre>
 
 <script>
 $scope.items = [
   { firstName: 'Dean', lastName: 'Sofer',
-    id: 1, gender: 'Male' },
+  id: 1, gender: 'Male' },
   { firstName: 'Dean', lastName: 'Kuntz',
-    id: 2, gender: 'Male' },
+  id: 2, gender: 'Male' },
   { firstName: 'Peter', lastName: 'Piper',
-    id: 3, gender: 'Female' },
+  id: 3, gender: 'Female' },
   { firstName: 'Peter', lastName: 'Darwin',
-    id: 4, gender: 'Male' },
+  id: 4, gender: 'Male' },
   { firstName: 'Janet', lastName: 'Piper',
-    id: 5, gender: 'Female' },
+  id: 5, gender: 'Female' },
   { firstName: 'Dan', lastName: 'Doyon',
-    id: 6, gender: 'Male' },
+  id: 6, gender: 'Male' },
   { firstName: 'Andy', lastName: 'Joslin',
-    id: 1, gender: 'Male' },
+  id: 1, gender: 'Male' },
 ];
 </script>
    -
    -
    -
    +
    +
    +
    -
    -
    -

    Format

    -
    -
    -
    -

    What?

    -

    Replace tokens in a string in a variety of ways

    -
    - - - - -

    {{ sentence | format : tokens[mode] }}

    - 
    Tokens: {{ tokens[mode] | json }}
    -
    -
    -
    -

    Why?

    -

    Most commonly, this filter is helpful for internationalization. However anywhere you need to do string replacement the format filter will come in handy.

    -

    How?

    +
    +
    +

    Format

    +
    +
    +
    +

    What?

    +

    Replace tokens in a string in a variety of ways

    +
    + + + + +

    {{ sentence | format : tokens[mode] }}

    + 
    Tokens: {{ tokens[mode] | json }}
    +
    +
    +
    +

    Why?

    +

    Most commonly, this filter is helpful for internationalization. However anywhere you need to do string replacement the format filter will come in handy.

    +

    How?

    {{ "Hello $0, how are you?" | format : 'Bob' }}
 -- or --
 $scope.tokens = ['first','second','third'];
@@ -1197,11 +1197,11 @@ 
    How?
    
 $scope.tokens = { name:'Bob', subject:'wife' };
 ...
 {{ "Hey :name, how's the :subject?" | format : tokens }}
    -
    -
    -
    +
    +
    + @@ -1219,22 +1219,22 @@

    How?

    Create a Custom Build

    -
    -

    {{buildErrorText}}

    -
    -
    -

    Select the modules you wish to download:

    - -
    +
    +

    {{buildErrorText}}

    +
    +
    +

    Select the modules you wish to download:

    + +
    - Recommended Modules - Download {{selectedModules.length}} Modules - Cancel + Recommended Modules + Download {{selectedModules.length}} Modules + Cancel
    From bed65e49b29a41566e95dd463fac0a108e25ce5f Mon Sep 17 00:00:00 2001 From: Josey Morton Date: Wed, 13 Feb 2013 09:36:59 -0600 Subject: [PATCH 6/6] fixing tab spacing --- index.html | 1992 ++++++++++++++++++++++++++++------------------------ 1 file changed, 1086 insertions(+), 906 deletions(-) diff --git a/index.html b/index.html index a2985da..f3c69e5 100644 --- a/index.html +++ b/index.html @@ -1,270 +1,272 @@ - AngularUI for AngularJS - - - - - - - - - - - - - - - - - - - - - - - - - - + AngularUI for AngularJS + + + + + + + + + + + + + + + + + + + + + + + + + + -
    -
    -
    -
    - - AngularUI - - - -
    -
    - - -
    -
    -
    -
    -
    - -
    -
    -

    - AngularUI -

    -

    The companion suite to the AngularJS framework.

    -

    - Code on Github DownloadCreate a Build -

    -
    -
    -
    -
      -
    • - -
      • -
    • - -
      • -
    • - - -
      • -
    • - -
      - - - -
      • -
    -
    -
    -
    - -
    - -

    - Check out the new - - Bootstrap Project - - by the AngularUI Team! -

    - -
    -

    Getting Started

    -

    Setup is easy and designed to be highly modular. Just follow these steps in order:

    -
      -
    1. Optional Include the Internet Explorer Shiv (read why here)
      2. -
    2. Optional Include jQuery if using jQuery Plugins
      3. -
    3. Optional Include any jQuery(UI) plugins you wish to use (plugins are not bundled with AngularUI)
      4. -
    4. Include AngularJS
      5. -
    5. Include AngularUI in one of the following ways: -
        -
      • Include the entire library (located in /build directory)
        • -
      • Include the /common/module.js and any directives or filters you wish to use
        • -
      • Create a custom build and include it
        • -
      -
      6. -
    6. Add the 'ui' module as a dependency: - 
      angular.module('myModule', ['ui'])
      -
      7. -
    7. Optional Setup your Global Defaults for plugins and directives
      8. -
    -
    - -
    -

    Global Defaults

    -
    -
    -

    You can specify default options for most AngularUI directives. This way you don't have to pass them every single time you call the directive. Passed options will be merged onto defaults, overriding any pre-existing keys.

    -

    Simply declare the global config on your module: module.value('ui.config', {}). Each directive should be namespaced by the directive name (without the ui- prefix).

    -
    -
    -

    Here's an example to make ui-select2 clearable by default:

    +
    +
    +
    +
    + + AngularUI + + + +
    +
    + + +
    +
    +
    +
    +
    + +
    +
    +

    + AngularUI +

    +

    The companion suite to the AngularJS framework.

    +

    + Code on Github DownloadCreate a Build +

    +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    • + + +
      • +
    • + +
      + + + +
      • +
    +
    +
    +
    + +
    + +

    + Check out the new + + Bootstrap Project + + by the AngularUI Team! +

    + +
    +

    Getting Started

    +

    Setup is easy and designed to be highly modular. Just follow these steps in order:

    +
      +
    1. Optional Include the Internet Explorer Shiv (read why here)
      2. +
    2. Optional Include jQuery if using jQuery Plugins
      3. +
    3. Optional Include any jQuery(UI) plugins you wish to use (plugins are not bundled with AngularUI)
      4. +
    4. Include AngularJS
      5. +
    5. Include AngularUI in one of the following ways: +
        +
      • Include the entire library (located in /build directory)
        • +
      • Include the /common/module.js and any directives or filters you wish to use
        • +
      • Create a custom build and include it
        • +
      +
      6. +
    6. Add the 'ui' module as a dependency: + 
      angular.module('myModule', ['ui'])
      +
      7. +
    7. Optional Setup your Global Defaults for plugins and directives
      8. +
    +
    + +
    +

    Global Defaults

    +
    +
    +

    You can specify default options for most AngularUI directives. This way you don't have to pass them every single time you call the directive. Passed options will be merged onto defaults, overriding any pre-existing keys.

    +

    Simply declare the global config on your module: module.value('ui.config', {}). Each directive should be namespaced by the directive name (without the ui- prefix).

    +
    +
    +

    Here's an example to make ui-select2 clearable by default:

     var myModule = angular.module('myModule', ['ui']);
 myModule.value('ui.config', {
    select2: {
-    allowClear: true
+      allowClear: true
    }
 });
    -
    -
    -
    +
    +
    +
    -
    -
    -

    IE Shiv shim or whatever you wanna call it

    -
    +
    +
    +

    IE Shiv shim or whatever you wanna call it

    +
    -

    Why?

    -

    In brief, custom tag elements (and thus directives that support them) like <ng-view> or <ui-currency> are ignored by IE 8 and older. Custom tags are cool because they are terse and give semantic to your awesome html5 app. AngularJS has provided a recipe for doing this, however, our solution saves you the fuss.

    +

    Why?

    +

    In brief, custom tag elements (and thus directives that support them) like <ng-view> or <ui-currency> are ignored by IE 8 and older. Custom tags are cool because they are terse and give semantic to your awesome html5 app. AngularJS has provided a recipe for doing this, however, our solution saves you the fuss.

    -

    How?

    -

    Below is how you would incorporate shiv by putting it into the <head> of your html code. For more, - see code page on github -

    +

    How?

    +

    Below is how you would incorporate shiv by putting it into the <head> of your html code. For more, + see code page on github + 

    <head>
 
 <!--[if lte IE 8]>
-  <script>
-  // The ieshiv takes care of our ui.directives, bootstrap module directives and 
-  // AngularJS's ng-view, ng-include, ng-pluralize and ng-switch directives.
-  // However, IF you have custom directives (yours or someone else's) then
-  // enumerate the list of tags in window.myCustomTags
-
-  window.myCustomTags = [ 'yourDirective', 'somebodyElsesDirective' ]; // optional
-  </script>
-  <script src="build/angular-ui-ieshiv.js"></script>
+    <script>
+    // The ieshiv takes care of our ui.directives, bootstrap module directives and 
+    // AngularJS's ng-view, ng-include, ng-pluralize and ng-switch directives.
+    // However, IF you have custom directives (yours or someone else's) then
+    // enumerate the list of tags in window.myCustomTags
+
+    window.myCustomTags = [ 'yourDirective', 'somebodyElsesDirective' ]; // optional
+    </script>
+    <script src="build/angular-ui-ieshiv.js"></script>
 <![endif]-->
 
 </head>
    -
    - -
    -
    -

    jQuery Passthrough

    -
    -
    -
    -

    What?

    -

    Call the jQuery function or plugin specified on the element.

    -

    This example shows how to call the bootstrap tooltip with almost no work:

    -
    -

    Hover over me for static Tooltip

    -

    - Fill the input for a dynamic Tooltip: - -

    -
    -
    -
    -

    Why?

    -

    Not every jQuery plugin requires creating a new directive just to use it. Instead, use the pass-through directive to rapidly port functionality. It is probably the best solution for 75% of the cases you will encounter.

    -

    If a plugin requires more robust integration with AngularJS then you may need to look into creating a custom directive instead, or contact us with a request.

    -
    -
    - -

    How?

    -

    To call something like $.fn.tooltip() simply do ui-jq="tooltip". Note that the name of the function must be identical. This also works for normal jQuery commands such as $.fn.slideUp().

    -

    To pass parameters use the ui-options attribute. The value will be evaluated in the $scope context and passed to the function. If defaults are set, the passed options will extend them. If a string is passed, the default options will be ignored.

    -

    Use the directive name jq for namespacing inside ui.config. Then sub-namespace options for each function by the name of that function (exactly as it is passed to ui-jq) so that you don't have to pass options every time you call the directive.

    +
    + +
    +
    +

    jQuery Passthrough

    +
    +
    +
    +

    What?

    +

    Call the jQuery function or plugin specified on the element.

    +

    This example shows how to call the bootstrap tooltip with almost no work:

    +
    +

    Hover over me for static Tooltip

    +

    + Fill the input for a dynamic Tooltip: + +

    +
    +
    +
    +

    Why?

    +

    Not every jQuery plugin requires creating a new directive just to use it. Instead, use the pass-through directive to rapidly port functionality. It is probably the best solution for 75% of the cases you will encounter.

    +

    If a plugin requires more robust integration with AngularJS then you may need to look into creating a custom directive instead, or contact us with a request.

    +
    +
    + +

    How?

    +

    To call something like $.fn.tooltip() simply do ui-jq="tooltip". Note that the name of the function must be identical. This also works for normal jQuery commands such as $.fn.slideUp().

    +

    To pass parameters use the ui-options attribute. The value will be evaluated in the $scope context and passed to the function. If defaults are set, the passed options will extend them. If a string is passed, the default options will be ignored.

    +

    Use the directive name jq for namespacing inside ui.config. Then sub-namespace options for each function by the name of that function (exactly as it is passed to ui-jq) so that you don't have to pass options every time you call the directive.

     <a title="Easiest. Binding. Ever!" ui-jq="tooltip">Hover over me for static Tooltip</a>
 
@@ -275,172 +277,172 @@ 
    How?
    
 myModule.value('ui.config', {
    // The ui-jq directive namespace
    jq: {
-    // The Tooltip namespace
-    tooltip: {
-     // Tooltip options. This object will be used as the defaults
-     placement: 'right'
-    }
+      // The Tooltip namespace
+      tooltip: {
+         // Tooltip options. This object will be used as the defaults
+         placement: 'right'
+      }
    }
 });
 </script>
    -
    - -
    -
    -

    CodeMirror

    -
    -
    -
    -

    What?

    -

    IDE? In my textareas? Surely you're joking.

    -

    -
    -
    -

    How?

    +
    + +
    +
    +

    CodeMirror

    +
    +
    +
    +

    What?

    +

    IDE? In my textareas? Surely you're joking.

    +

    +
    +
    +

    How?

     <textarea ui-codemirror="{theme:'monokai'}" ng-model="codeMirrorModel"></textarea>
    -
    -
    -
    - -
    -
    -

    Event Binder

    -
    -
    -
    -

    What?

    -

    Bind a callback to any event not natively supported by Angular.

    -

    -

    Why?

    -

    For Blurs, Focus, Double-Clicks or any other event you may choose that isn't built-in.

    -
    -
    -

    How?

    -

    You can alternatively pass multiple events as an object:

    +
    +
    +
    + +
    +
    +

    Event Binder

    +
    +
    +
    +

    What?

    +

    Bind a callback to any event not natively supported by Angular.

    +

    +

    Why?

    +

    For Blurs, Focus, Double-Clicks or any other event you may choose that isn't built-in.

    +
    +
    +

    How?

    +

    You can alternatively pass multiple events as an object:

     <input ui-event="{ blur : 'blurCallback()' }">
 
 <script>
 $scope.blurCallback = function() {
-  alert('Goodbye');
+	alert('Goodbye');
 };
 </script>
    -
    -
    -
    - -
    -
    -

    Calendar

    -
    -
    -
    -
    -

    What?

    -

    Attach Angular objects to a calendar.

    -

    Why?

    -

    For easy integration with scope objects.

    -

    Click to add an Event!

    - - -
      -
    • -

      - {{e.title}} - x -

      -
      • -
    - -
    - -
    -
    -
    -

    How?

    - 
    +
    +
    + + +
    +
    +

    Calendar

    +
    +
    +
    +
    +

    What?

    +

    Attach Angular objects to a calendar.

    +

    Why?

    +

    For easy integration with scope objects.

    +

    Click to add an Event!

    + + +
      +
    • +

      + {{e.title}} + x +

      +
      • +
    + +
    + +
    +
    +
    +

    How?

    + 
     <div ui-calendar="{height: 450,editable: true}" class="span8 calendar" ng-model="events"></div> 
 
 function CalendarCtrl($scope) {
-  var date = new Date();
-  var d = date.getDate();
-  var m = date.getMonth();
-  var y = date.getFullYear();
-  
-  $scope.events = [
-    {title: 'All Day Event',start: new Date(y, m, 1)},
-    {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
-    {id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
-    {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
-    {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
-    {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
-  ]
-
-  $scope.addChild = function() {
-    $scope.events.push({
-    title: 'Open Sesame',
-    start: new Date(y, m, 28),
-    end: new Date(y, m, 29)
-    });
-  }
-
-  $scope.remove = function(index) {
-    $scope.events.splice(index,1);
-  }
+	var date = new Date();
+    var d = date.getDate();
+    var m = date.getMonth();
+    var y = date.getFullYear();
+    
+    $scope.events = [
+	  {title: 'All Day Event',start: new Date(y, m, 1)},
+	  {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
+	  {id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
+	  {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
+	  {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
+	  {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
+    ]
+
+    $scope.addChild = function() {
+      $scope.events.push({
+        title: 'Open Sesame',
+        start: new Date(y, m, 28),
+        end: new Date(y, m, 29)
+      });
+    }
+
+    $scope.remove = function(index) {
+      $scope.events.splice(index,1);
+    }
 }
    -
    - -
    -
    -

    Google Maps

    -
    -
    -
    -
    -

    Click to add a marker!

    -

    {{zoomMessage}}

    - - - -
    -
    - -
    -

    Marker

    - Lat: , Lng: - Set Position -
    -
    - - -
    -
    -
    -
    -

    How?

    -

    Remember that you can pass a variable containing an object to ui-event

    +
    + +
    +
    +

    Google Maps

    +
    +
    +
    +
    +

    Click to add a marker!

    +

    {{zoomMessage}}

    + + + +
    +
    + +
    +

    Marker

    + Lat: , Lng: + Set Position +
    +
    + + +
    +
    +
    +
    +

    How?

    +

    Remember that you can pass a variable containing an object to ui-event

     <h4>Click to add a marker!</h4>
 <p>{{zoomMessage}}</p>
 <ul>
   <li ng-repeat="marker in myMarkers">
-  <a ng-click="myMap.panTo(marker.getPosition())">Pan to Marker {{$index}}</a>
+    <a ng-click="myMap.panTo(marker.getPosition())">Pan to Marker {{$index}}</a>
   </li>
 </ul>
 
@@ -474,8 +476,8 @@ 
    How?
    
 
 $scope.addMarker = function($event) {
   $scope.myMarkers.push(new google.maps.Marker({
-  map: $scope.myMap,
-  position: $event.latLng
+    map: $scope.myMap,
+    position: $event.latLng
   }));
 };
 
@@ -503,31 +505,31 @@ 
    How?
    
 }
 </style>
    -
    - -
    -
    -

    Date

    -
    -
    -
    -

    What?

    -

    Calendar picker with ng-model integration

    -
    - -

    -     -

    Selected Date: {{ date }}

    -

    Formatted Date: {{ date | date: 'mediumDate'}}

    -

    Selected Month: {{ date.getMonth() }}

    -
    -
    -
    -
    -

    Why?

    -

    Because you want to be able to update the calendar programmatically if it'a already open. Amongst other things

    - -

    How?

    +
    + +
    +
    +

    Date

    +
    +
    +
    +

    What?

    +

    Calendar picker with ng-model integration

    +
    + +

    +     +

    Selected Date: {{ date }}

    +

    Formatted Date: {{ date | date: 'mediumDate'}}

    +

    Selected Month: {{ date.getMonth() }}

    +
    +
    +
    +
    +

    Why?

    +

    Because you want to be able to update the calendar programmatically if it'a already open. Amongst other things

    + +

    How?

     <input ng-model="date" ui-date>
 Selected Date: {{ date }}
@@ -535,35 +537,35 @@ 
    How?
    
 Selected Month: {{ date.getMonth() }}
 <div ng-model="date" ui-date></div>
    -

    If ≤ IE8 make sure you have a polyfill for Date.toISOString()

    -
    -
    -
    - -
    -
    -

    Keypress

    -
    -
    -
    -

    What?

    -

    Bind an event to a particular keypress

    -

    -

    -

    -
    -
    -

    Why?

    -

    Cuz you feel like it? Maybe I should stop doing the 'Why' sections, running out of explanations...

    -

    How?

    -

    The directive takes a hash (object) with the key code as the key and the callback function to fire as the value. The callback function takes an 'event' param

    -

    Note that 13 represents the RETURN key code.

    +
    +
    +

    Why?

    +

    Cuz you feel like it? Maybe I should stop doing the 'Why' sections, running out of explanations...

    +

    How?

    +

    The directive takes a hash (object) with the key code as the key and the callback function to fire as the value. The callback function takes an 'event' param

    +

    Note that 13 represents the RETURN key code.

     <textarea
   ui-keypress="{13:'keypressCallback($event)'}">
@@ -577,159 +579,159 @@ 
    How?
    
 
 <script>
 $scope.keypressCallback = function($event) {
-  alert('Voila!');
-  $event.preventDefault();
+	alert('Voila!');
+	$event.preventDefault();
 };
 </script>
    -
    -
    -
    - -
    -
    -

    Mask

    -
    -

    What?

    -

    -

    -

    Mask model value: {{maskDemo}}

    - -

    How?

    -

    The most important thing you need to know is that this requires a specific version of the jQuery mask plugin.

    -

    You can find the correct version here: http://angular-ui.github.com/lib/maskedinput/jquery.maskedinput.js

    + + +
    + +
    +
    +

    Mask

    +
    +

    What?

    +

    +

    +

    Mask model value: {{maskDemo}}

    + +

    How?

    +

    The most important thing you need to know is that this requires a specific version of the jQuery mask plugin.

    +

    You can find the correct version here: http://angular-ui.github.com/lib/maskedinput/jquery.maskedinput.js

     <input ng-model="maskDemo" ui-mask="'99-99-9999'">
    -
    - -
    -
    -

    If

    -
    -
    -
    -

    What?

    -

    Remove elements from the DOM completely instead of just hiding it.

    -
    -

    Using ng-show

    -
      -
    • First
      • -
    • Middle
      • -
    • Last
      • -
    -

    Using ui-if

    -
      -
    • First
      • -
    • Middle
      • -
    • Last
      • -
    -
    -

    Why?

    -

    In situations where DOM traversal matters (such as the CSS selectors :first-child, :last-child and :nth()-child), simply hiding elements is not enough.

    -
    -
    - -

    How?

    +
    + +
    +
    +

    If

    +
    +
    +
    +

    What?

    +

    Remove elements from the DOM completely instead of just hiding it.

    +
    +

    Using ng-show

    +
      +
    • First
      • +
    • Middle
      • +
    • Last
      • +
    +

    Using ui-if

    +
      +
    • First
      • +
    • Middle
      • +
    • Last
      • +
    +
    +

    Why?

    +

    In situations where DOM traversal matters (such as the CSS selectors :first-child, :last-child and :nth()-child), simply hiding elements is not enough.

    +
    +
    + +

    How?

     <ul class="piped-list">
-  <li ui-if="false">First</li>
-  <li>Middle</li>
-  <li>Last</li>
+	<li ui-if="false">First</li>
+	<li>Middle</li>
+	<li>Last</li>
 </ul>
 
 <style>
 .piped-list li {
-  display: inline-block;
-  border-left: 2px solid;
-  margin-left: 5px;
-  padding-left: 10px;
+	display: inline-block;
+	border-left: 2px solid;
+	margin-left: 5px;
+	padding-left: 10px;
 }
 .piped-list li:first-child {
-  border-left: none;
-  margin-left: 0;
+	border-left: none;
+	margin-left: 0;
 }
 </style>
    -
    -
    -
    - -
    -
    -

    Validate

    -
    -
    -
    -

    What?

    -

    The ui-validate directive makes it very easy to use any function as a validation function for input elements using ngModel.

    -
    -
    - - - - This e-mail is black-listed! -
    is form valid: {{form.$valid}} -
    email errors: {{form.email.$error | json}} -
    -
    -

    Why?

    -

    AngularJS comes with several built-in validation mechanism for input fields (ngRequired, ngPattern etc.) but using an arbitrary validation function requires creation of custom formatters and / or parsers. The ui-validate directive makes it easy to use any function(s) defined in scope as a validator function(s).

    -
    -
    -

    How?

    -

    Just add the 'ui-validate' directive to your input field.

    -
      -
    • Expressions and methods should be passed as strings: ui-validate="'method($value)'"
      • -
    • Methods should be passed the $value variable.
      • -
    • 2 types of syntax are supported: -
        -
      • ui-validate="'validateFoo($value)'"
        • -
      • ui-validate="{foo : 'validateFoo($value)', bar : 'validateBar($value)'}"
        • -
      -
      • -
    • The attribute ui-validate-watch can be used to watch another model and updates ui-validate whenever the passed model changes. -
        -
      • ui-validate-watch="'anotherModel'"
        • -
      • ui-validate-watch="{foo: 'anotherModel'}"
        • -
      -
      • -
    +
    +
    +
    + +
    +
    +

    Validate

    +
    +
    +
    +

    What?

    +

    The ui-validate directive makes it very easy to use any function as a validation function for input elements using ngModel.

    +
    +
    + + + + This e-mail is black-listed! +
    is form valid: {{form.$valid}} +
    email errors: {{form.email.$error | json}} +
    +
    +

    Why?

    +

    AngularJS comes with several built-in validation mechanism for input fields (ngRequired, ngPattern etc.) but using an arbitrary validation function requires creation of custom formatters and / or parsers. The ui-validate directive makes it easy to use any function(s) defined in scope as a validator function(s).

    +
    +
    +

    How?

    +

    Just add the 'ui-validate' directive to your input field.

    +
      +
    • Expressions and methods should be passed as strings: ui-validate="'method($value)'"
      • +
    • Methods should be passed the $value variable.
      • +
    • 2 types of syntax are supported: +
        +
      • ui-validate="'validateFoo($value)'"
        • +
      • ui-validate="{foo : 'validateFoo($value)', bar : 'validateBar($value)'}"
        • +
      +
      • +
    • The attribute ui-validate-watch can be used to watch another model and updates ui-validate whenever the passed model changes. +
        +
      • ui-validate-watch="'anotherModel'"
        • +
      • ui-validate-watch="{foo: 'anotherModel'}"
        • +
      +
      • + 
     <input ng-model="email" ui-validate="{blacklist : 'notBlackListed($value)'}">
 <span ng-show='form.email.$error.blacklist'>This e-mail is black-listed!</span>
    - and in a controller: + and in a controller: 
     function ValidateCtrl($scope) {
-  $scope.blackList = ['bad@domain.com','verybad@domain.com'];
-  $scope.notBlackListed = function(value) {
-  return $scope.blackList.indexOf(value) === -1;
-  };
+	$scope.blackList = ['bad@domain.com','verybad@domain.com'];
+	$scope.notBlackListed = function(value) {
+	return $scope.blackList.indexOf(value) === -1;
+	};
 }
    -

    -
    - -
    -
    - -
    -
    -

    Reset

    -
    -
    -
    -

    What?

    -

    Adds an icon or link that empties the input element

    -

    Resets to empty:    

    -

    Resets to "Empty":

    -

    Remember that you control the CSS. Make the icon always show by changing the CSS to match the :hover state.

    -
    -
    -

    How?

    -

    You can set an app-wide reset value using ui.config

    +

    +
    + +
    +
    + +
    +
    +

    Reset

    +
    +
    +
    +

    What?

    +

    Adds an icon or link that empties the input element

    +

    Resets to empty:    

    +

    Resets to "Empty":

    +

    Remember that you control the CSS. Make the icon always show by changing the CSS to match the :hover state.

    +
    +
    +

    How?

    +

    You can set an app-wide reset value using ui.config

     <input ng-model="resetModel" ui-reset>
 <input ng-model="resetModel" ui-reset=" 'Empty' ">
@@ -738,31 +740,31 @@ 
    How?
    
 $scope.resetModel = 'Hover over me';
 </script>
    -
    -
    -
    - -
    -
    -

    Animate

    -
    -
    -
    -

    What?

    -

    Transition the injection of new DOM elements.

    -

    Support will later be added for transitioning the removal of DOM elements due to the complexity of this task.

    - Add Item -
      -
    • Item #{{$index+1}}
      • -
    - 
    $scope.items: {{items}}
    -

    Why?

    -

    People have been asking for a way to animate the addition and removal of DOM elements. This is a simple way of doing it using CSS3 transitions. A 'hidden' transitionable class (that doesn't use display:none) is attached to the node before it's injected and then immediately removed after.

    -
    -
    -

    How?

    -

    Add default state CSS and CSS3 transitions to the DOM elements you wish to ui-animate. Then apply your 'hidden' CSS to the .ui-animate state. The nodes will transition from your 'hidden' state to their default state. Refer to the CSS below as an example.

    -

    You can pass a string to use as an alternative class (such as ui-hide). Support for other options will be added in the future.

    +
    +
    +
    + +
    +
    +

    Animate

    +
    +
    +
    +

    What?

    +

    Transition the injection of new DOM elements.

    +

    Support will later be added for transitioning the removal of DOM elements due to the complexity of this task.

    + Add Item +
      +
    • Item #{{$index+1}}
      • +
    + 
    $scope.items: {{items}}
    +

    Why?

    +

    People have been asking for a way to animate the addition and removal of DOM elements. This is a simple way of doing it using CSS3 transitions. A 'hidden' transitionable class (that doesn't use display:none) is attached to the node before it's injected and then immediately removed after.

    +
    +
    +

    How?

    +

    Add default state CSS and CSS3 transitions to the DOM elements you wish to ui-animate. Then apply your 'hidden' CSS to the .ui-animate state. The nodes will transition from your 'hidden' state to their default state. Refer to the CSS below as an example.

    +

    You can pass a string to use as an alternative class (such as ui-hide). Support for other options will be added in the future.

     <a ng-click="items.push(true)">Add Item</a>
 <ul>
@@ -788,38 +790,38 @@ 
    How?
    
 }
 </style>
    -
    -
    -
    - -
    -
    -

    Modal

    -
    -
    -
    -

    What?

    -

    Takes the twitter bootstrap modal and lets you assign an ng-model to it. You can open/close the modal any way you want: data-* attributes, or use elm.modal('show'), or whatever. The ng-model you give will always correspond to whether the modal is opened or not, and if you set it it will also change the modal. -

    -

    -

    Modalin'!

    -
    -

    Cool beans, dude.

    -
    -
    - Close bootstrap way - Close ng-model way -
    -
    - Open Modal with ng-model
    - Open Modal with data-toggle="modal" -

    -

    Why?

    -

    We wanted to be able to open/close a modal programatically, so we stuck an ng-model onto the bootstrap modal and called it a day.

    -
    -
    -

    How?

    - 
    +
    +
    +
    + +
    +
    +

    Modal

    +
    +
    +
    +

    What?

    +

    Takes the twitter bootstrap modal and lets you assign an ng-model to it. You can open/close the modal any way you want: data-* attributes, or use elm.modal('show'), or whatever. The ng-model you give will always correspond to whether the modal is opened or not, and if you set it it will also change the modal. +

    +

    +

    Modalin'!

    +
    +

    Cool beans, dude.

    +
    +
    + Close bootstrap way + Close ng-model way +
    +
    + Open Modal with ng-model
    + Open Modal with data-toggle="modal" +

    +

    Why?

    +

    We wanted to be able to open/close a modal programatically, so we stuck an ng-model onto the bootstrap modal and called it a day.

    +
    +
    +

    How?

    + 
     <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
 <div ui-modal class="fade" ng-model="modalShown" id="myModal">
   Cool, a modal dialog!
@@ -828,103 +830,103 @@ 
    How?
    
 </div>
 <a ng-click="modalShown=true">Open 1</a>
 <a data-toggle="modal" href="#myModal">Open 2</a>
-
    -
    -
    -
    - -
    -
    -

    Scrollfix

    -
    -
    -
    -

    What?

    -

    Add a 'ui-fixed' class to elements when the page scrolls past them

    -
    -

    They see me scrollin...

    - Try scrolling past the red text or changing the offset -
    -
    -
    -

    Why?

    -

    Make elements sticky, or simply appear different after scrolling past a certain point

    -

    Remember that this directive only adds a ui-scrollfix class to the element. It is up to you to add the corresponding CSS rules, however it also gives you the ability to add other rules instead if you prefer.

    -
    -
    - -

    How?

    + + + +
    + +
    +
    +

    Scrollfix

    +
    +
    +
    +

    What?

    +

    Add a 'ui-fixed' class to elements when the page scrolls past them

    +
    +

    They see me scrollin...

    + Try scrolling past the red text or changing the offset +
    +
    +
    +

    Why?

    +

    Make elements sticky, or simply appear different after scrolling past a certain point

    +

    Remember that this directive only adds a ui-scrollfix class to the element. It is up to you to add the corresponding CSS rules, however it also gives you the ability to add other rules instead if you prefer.

    +
    +
    + +

    How?

    <p ui-scrollfix>They see me scrollin...</p>
    -

    You can optionally pass a number to ui-scrollfix which would override the detected y-offset of the element. Values can be either absolute 600 or offset from the calculated value -50 or +100.

    -
    - -
    -
    -

    Select2

    - Select2 is inspired by Chosen -
    -
    -
    -

    Demo

    -
    -

    Value is: {{select2}} (choose second)

    - -
    -
    -
    -

    Options

    -

    You can pass an object to Select2 as the expression: ui-select2="{allowClear:true}" that will be passed directly to $.fn.select2(). You can read more about the supported list of options and what they do on the Select2 Documentation Page. AngularUI will leverage properties passed to Select2 for any complex behavior, there are no parameters necessary for that are specific to AngularUI.

    -
    -
    -

    ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead

    -

    In order to properly support the Select2 placeholder, create an empty <option> tag at the top of the <select> and either set a data-placeholder on the select element or pass a placeholder option to Select2.

    - -

    How?

    +

    You can optionally pass a number to ui-scrollfix which would override the detected y-offset of the element. Values can be either absolute 600 or offset from the calculated value -50 or +100.

    +
    + +
    +
    +

    Select2

    + Select2 is inspired by Chosen +
    +
    +
    +

    Demo

    +
    +

    Value is: {{select2}} (choose second)

    + +
    +
    +
    +

    Options

    +

    You can pass an object to Select2 as the expression: ui-select2="{allowClear:true}" that will be passed directly to $.fn.select2(). You can read more about the supported list of options and what they do on the Select2 Documentation Page. AngularUI will leverage properties passed to Select2 for any complex behavior, there are no parameters necessary for that are specific to AngularUI.

    +
    +
    +

    ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead

    +

    In order to properly support the Select2 placeholder, create an empty <option> tag at the top of the <select> and either set a data-placeholder on the select element or pass a placeholder option to Select2.

    + +

    How?

     <p>Value is: {{select2}} <a ng-click="select2='two'">(choose second)</a></p>
 <select ui-select2 ng-model="select2">
-  <option value="">Pick a number</option>
-  <option value="one">First</option>
-  <option value="two">Second</option>
-  <option value="three">Third</option>
+	<option value="">Pick a number</option>
+	<option value="one">First</option>
+	<option value="two">Second</option>
+	<option value="three">Third</option>
 </select>

    Or try playing around with this sandbox demo to see how AJAX works

    -
    - -
    -
    -

    Show, Hide and Toggle Alternatives

    -
    -
    -
    -

    What?

    - -

    Instead of doing ng-show and ng-hide which simply sets display:block/none a ui-show and ui-hide class will be added which can give you tighter control over how things appear or disappear.

    -
    -

    Toggle State: {{!!showHideAn}}

    -

    - Show - Hide - Toggle -

    -
    -
    -
    -

    Why?

    -

    CSS3 transitions of course! Applying a class means you can specify exactly how these two states behave. In addition, the show/hide variants do not enforce css rules when they are false (unless you use toggle), so the default CSS can still apply.

    -
    But can't you just do ng-class="{ ui-show : someExpression }"?
    -

    ... shutup.

    -

    In all seriousness, this is just a convenience wrapper for using ng-class. This way you can simply swap out instances of ng for ui to immediately get your customized approach.

    -
    -
    - -

    How?

    +
    + +
    +
    +

    Show, Hide and Toggle Alternatives

    +
    +
    +
    +

    What?

    + +

    Instead of doing ng-show and ng-hide which simply sets display:block/none a ui-show and ui-hide class will be added which can give you tighter control over how things appear or disappear.

    +
    +

    Toggle State: {{!!showHideAn}}

    +

    + Show + Hide + Toggle +

    +
    +
    +
    +

    Why?

    +

    CSS3 transitions of course! Applying a class means you can specify exactly how these two states behave. In addition, the show/hide variants do not enforce css rules when they are false (unless you use toggle), so the default CSS can still apply.

    +
    But can't you just do ng-class="{ ui-show : someExpression }"?
    +

    ... shutup.

    +

    In all seriousness, this is just a convenience wrapper for using ng-class. This way you can simply swap out instances of ng for ui to immediately get your customized approach.

    +
    +
    + +

    How?

     <p><a ng-click="showHide=!showHide">Toggle State: {{!!showHide}}</a></p>
 <div ui-show="showHide">Show</div>
@@ -933,37 +935,37 @@ 
    How?
    
 
 <style>
 .ui-show {
-  color: blue;
-  transition: all 0.5s ease; // You should probably browser-prefix this
+	color: blue;
+	transition: all 0.5s ease; // You should probably browser-prefix this
 }
 .ui-hide {
-  opacity: 0;
-  transition: all 0.5s ease; // You should probably browser-prefix this
+	opacity: 0;
+	transition: all 0.5s ease; // You should probably browser-prefix this
 }
 </style>
    -

    Using ui-show or ui-hide will add a class of the same name when the expression is true.

    -

    Use ui-toggle if you want to leverage both classes, as ui-show will be added when true and ui-hide when false.

    -
    - -
    -
    -

    TinyMCE

    -
    -

    Demo disabled temporarily due to conflicts with other directives. Use at your own risk!

    -
    -
    -

    What?

    -

    TinyMCE WYSIWYG integration

    -
    - -

    Output:

    -

    {{tinymce}}

    -
    -
    -
    -

    How?

    -

    This example shows how you can use ui.config for greater convenience. You can still pass the configuration as the expression (even in addition to ui.config).

    +

    Using ui-show or ui-hide will add a class of the same name when the expression is true.

    +

    Use ui-toggle if you want to leverage both classes, as ui-show will be added when true and ui-hide when false.

    +
    + +
    +
    +

    TinyMCE

    +
    +

    Demo disabled temporarily due to conflicts with other directives. Use at your own risk!

    +
    +
    +

    What?

    +

    TinyMCE WYSIWYG integration

    +
    + +

    Output:

    +

    {{tinymce}}

    +
    +
    +
    +

    How?

    +

    This example shows how you can use ui.config for greater convenience. You can still pass the configuration as the expression (even in addition to ui.config).

     <textarea ui-tinymce ng-model="tinymce"></textarea>
 <p>{{tinymce}}</p>
@@ -971,42 +973,133 @@ 
    How?
    
 <script>
 myModule.value('ui.config', {
    tinymce: {
-    theme: 'simple',
+      theme: 'simple',
    }
 });
 </script>
    -
    -
    - - -
    - -
    -
    -

    Currency

    -
    -
    -
    -

    What?

    -

    Angular currencyFilter wrapper

    -
    - - - -
    -
    -
    -

    Why?

    -

    In angular, you are able to specify what the currency symbol is (however, you might not want to change it for localization). - This directive gives greater control over your currency elements by allowing you to set CSS styles based on the number's sign. -

    -
    -
    -
    -
    -

    How?

    -

    This example shows how you can use ui.config for greater convenience. You can still pass the configuration as the expression (even in addition to ui.config).

    +
    +
    + +
    + +
    +
    +

    Sortable

    +
    +
    +
    +

    What?

    + +
    +
    +

    Drag and drop the parents and children

    +
    +

    Destroy Families

    +

    You're not fit to be a mother!

    +
      +
    • +
        +
        {{parent.name}}
        +
          +
        • {{child}}
          • +
        +
      +
      • +
    +
    +
    +
    + 
    Parents: {{parents|json}}
    +
    +
    +
    +
    +

    How?

    + 
    +<script>
+$scope.parents = [
+  { name: 'Anna', 
+    children: ['Alvin', 'Becky' ,'Charlie'] },
+  { name: 'Barney', 
+    children: ['Dorothy', 'Eric'] },
+  { name: 'Chris', 
+    children: ['Frank', 'Gary', 'Henry'] }
+];
+</script>
+
+<ul ui-sortable ng-model="parents">
+  <li ng-repeat="parent in parents">
+    <h3>{{parent.name}}</h3>
+    <ul class="children"
+      ui-sortable="{connectWith:'.children'}"
+      ng-model="parent.children"> 
+      <li ng-repeat="child in parent.children">
+        {{child}}
+      </li>
+    </ul>
+  </li>
+</ul>
    +
    +
    +
    +
    +
    +
    +
    +

    Static Items

    +
      +
    • First
      • +
    • Second
      • +
    • Third
      • +
    +
    +
    +
    + 
    Static Items: {{items|json}}
    +
    +
    +
    +
    + 
    +<script>
+$scope.items = ['One', 'Two', 'Three'];
+</script>
+
+<ul ng-model="items" ui-sortable>
+  <li>First</li>
+  <li>Second</li>
+  <li>Third</li>
+</ul>
    +
    +
    +
    + +
    +
    +

    Currency

    +
    +
    +
    +

    What?

    +

    Angular currencyFilter wrapper

    +
    + + + +
    +
    +
    +

    Why?

    +

    In angular, you are able to specify what the currency symbol is (however, you might not want to change it for localization). + This directive gives greater control over your currency elements by allowing you to set CSS styles based on the number's sign. +

    +
    +
    +
    +
    +

    How?

    +

    This example shows how you can use ui.config for greater convenience. You can still pass the configuration as the expression (even in addition to ui.config).

     <span ui-currency ng-model="nums.pos"></span>
 <span ui-currency="{ symbol: '$', zero: 'my-zero-class'}" ng-model="nums.zero"></span>
@@ -1015,7 +1108,7 @@ 
    How?
    
 <script>
 myModule.value('ui.config', {
    currency: {
-    symbol: 'USD$',
+      symbol: 'USD$',
    }
 });
 </script>
@@ -1034,25 +1127,112 @@ 
    How?
    
 }
 </style>
    -
    -
    - - -
    - -
    -
    -

    Highlight

    -
    -

    What?

    -

    Easily highlight some text in a block

    -
    -

    -

    -

    -
    - -

    How?

    + + + + +
    + +
    +
    +

    Route Checking

    +
    + +
    +
    +

    What?

    +

    Route Matching Magic. It matches your routes ... magically!

    +
    +

    Clicking "Make Active" will reload the page. Pay attention to the routes.

    +
      +
    • uiRoute Info + IS + is NOT active. +
      • +
    • + Route {{ route }} + IS + is NOT active. + Make Active +
      • +
    +
    +
    + +
    +

    Why?

    +

    It would be nice if your app knew what the address path was and acted accordingly, right? Right.

    +
    + +
    +

    Options

    +
      +
    • Out of the box this directive ships with a boolean to determine if the route matches or not: $uiRoute. +
        +
      • Example Usage: <a ui-route="/page" ng-class="{active: $uiRoute}">link</a>
        • +
      +
      • +
    • Using ui-route as an attribute with value supports the following: +
        +
      • Static: <a ui-route="/page">
        • +
      • Regular Expression: <a ui-route="/page/[0-9]*">
        • +
      • Template Vars: <a ui-route="/page/{{ sample }}">
        • +
      • Template Vars && RegEx: <a ui-route="/page/{{ sample }}/[0-9]*">
        • +
      +
      • +
    • Using ui-route with ng-href attribute: +
        +
      • Static: <a ui-route ng-href="/page">
        • +
      • Template Vars: <a ui-route ng-href="/page/{{ sample }}">
        • +
      +
      • +
    • Using ui-route with href attribute: +
        +
      • Static Only: <a ui-route ng-href="/page">
        • +
      +
      • +
    +
    + +
    + +
    +
    +

    How?

    +
    +<ul>
+	<li ui-route="#/route-1">Route 1
+		<strong ui-if="$uiRoute">IS</strong>
+		<strong ui-if="!$uiRoute">is NOT</strong> active.
+	</li>
+	<li ui-route="#/route-2">Route 2
+		<strong ui-if="$uiRoute">IS</strong>
+		<strong ui-if="!$uiRoute">is NOT</strong> active.
+	</li>
+	<li ui-route="#/route-3">Route 3
+		<strong ui-if="$uiRoute">IS</strong>
+		<strong ui-if="!$uiRoute">is NOT</strong> active.
+	</li>
+</ul>
+
    +
    + +
    +
    + +
    +
    +

    Highlight

    +
    +

    What?

    +

    Easily highlight some text in a block

    +
    +

    +

    +

    +
    + +

    How?

     <label><input type="checkbox" ng-model="caseSensitive"> Case Sensitive?</label>
 <input placeholder="Enter some text to highlight" value="you" ng-model="highlightText">
@@ -1062,25 +1242,25 @@ 
    How?
    
 .ui-match { background: yellow; }
 </style>
    -
    - -
    -
    -

    Inflector

    -
    -

    What?

    -

    Converts a string to an alternative format.

    -
    -

    - - - -

    -

    -

    {{inflectorText|inflector:inflectorType}}

    -
    - -

    How?

    +
    + +
    +
    +

    Inflector

    +
    +

    What?

    +

    Converts a string to an alternative format.

    +
    +

    + + + +

    +

    +

    {{inflectorText|inflector:inflectorType}}

    +
    + +

    How?

     <label><input type="radio" value="humanize" ng-model="inflectorType"> Humanize (Default)</label>
 <label><input type="radio" value="underscore" ng-model="inflectorType"> Underscore</label>
@@ -1094,100 +1274,100 @@ 
    How?
    
 $scope.inflectorType = 'humanize';
 </script>
    -
    - -
    -
    -

    Unique

    -
    -
    -
    -

    What?

    -

    Filters out all duplicate objects items from an array by checking the specified key

    -
    -

    Select an attribute to check for uniqueness

    - - 
    {{items | unique:attribute | json}}
    -
    -
    -
    -

    How?

    -

    The filter can take the name of the key to check for uniqueness or set to a non-string truthy value to check the entire object.

    +
    + +
    +
    +

    Unique

    +
    +
    +
    +

    What?

    +

    Filters out all duplicate objects items from an array by checking the specified key

    +
    +

    Select an attribute to check for uniqueness

    + + 
    {{items | unique:attribute | json}}
    +
    +
    +
    +

    How?

    +

    The filter can take the name of the key to check for uniqueness or set to a non-string truthy value to check the entire object.

     <select ng-model="attribute">
-  <option value="">-- No Filter --</option>
-  <option>firstName</option>
-  <option>lastName</option>
-  <option>id</option>
-  <option>gender</option>
+	<option value="">-- No Filter --</option>
+	<option>firstName</option>
+	<option>lastName</option>
+	<option>id</option>
+	<option>gender</option>
 </select>
 <pre>{{items | unique:attribute | json}}</pre>
 
 <script>
 $scope.items = [
   { firstName: 'Dean', lastName: 'Sofer',
-  id: 1, gender: 'Male' },
+	id: 1, gender: 'Male' },
   { firstName: 'Dean', lastName: 'Kuntz',
-  id: 2, gender: 'Male' },
+	id: 2, gender: 'Male' },
   { firstName: 'Peter', lastName: 'Piper',
-  id: 3, gender: 'Female' },
+	id: 3, gender: 'Female' },
   { firstName: 'Peter', lastName: 'Darwin',
-  id: 4, gender: 'Male' },
+	id: 4, gender: 'Male' },
   { firstName: 'Janet', lastName: 'Piper',
-  id: 5, gender: 'Female' },
+	id: 5, gender: 'Female' },
   { firstName: 'Dan', lastName: 'Doyon',
-  id: 6, gender: 'Male' },
+	id: 6, gender: 'Male' },
   { firstName: 'Andy', lastName: 'Joslin',
-  id: 1, gender: 'Male' },
+	id: 1, gender: 'Male' },
 ];
 </script>
    -
    -
    -
    - -
    -
    -

    Format

    -
    -
    -
    -

    What?

    -

    Replace tokens in a string in a variety of ways

    -
    - - - - -

    {{ sentence | format : tokens[mode] }}

    - 
    Tokens: {{ tokens[mode] | json }}
    -
    -
    -
    -

    Why?

    -

    Most commonly, this filter is helpful for internationalization. However anywhere you need to do string replacement the format filter will come in handy.

    -

    How?

    +
    +
    +
    + +
    +
    +

    Format

    +
    +
    +
    +

    What?

    +

    Replace tokens in a string in a variety of ways

    +
    + + + + +

    {{ sentence | format : tokens[mode] }}

    + 
    Tokens: {{ tokens[mode] | json }}
    +
    +
    +
    +

    Why?

    +

    Most commonly, this filter is helpful for internationalization. However anywhere you need to do string replacement the format filter will come in handy.

    +

    How?

    {{ "Hello $0, how are you?" | format : 'Bob' }}
 -- or --
 $scope.tokens = ['first','second','third'];
@@ -1197,11 +1377,11 @@ 
    How?
    
 $scope.tokens = { name:'Bob', subject:'wife' };
 ...
 {{ "Hey :name, how's the :subject?" | format : tokens }}
    -
    -
    -
    - - + + + + + @@ -1219,22 +1399,22 @@

    How?

    Create a Custom Build

    -
    -

    {{buildErrorText}}

    -
    -
    -

    Select the modules you wish to download:

    - -
    +
    +

    {{buildErrorText}}

    +
    +
    +

    Select the modules you wish to download:

    + +
    - Recommended Modules - Download {{selectedModules.length}} Modules - Cancel + Recommended Modules + Download {{selectedModules.length}} Modules + Cancel