diff --git a/index.html b/index.html index fde1d5a..f3c69e5 100644 --- a/index.html +++ b/index.html @@ -76,7 +76,9 @@
  • Select2
  • Show / Hide / Toggle
  • TinyMCE
    • +
  • Sortable
  • Currency
    • +
  • Route Matching
  • @@ -656,52 +658,64 @@

    How?

    -
    -
    -

    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.

    -

    2 types of syntax are supported: -

      -
    • ui-validate="validateFoo"
      • -
    • ui-validate="{foo : validateFoo, bar : validateBar}"
      • -
    +
    +
    +

    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}'>
+<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;
+	};
 }
    -

    -
    -
    -
    +

    +
    + +
    +
    @@ -967,9 +981,100 @@

    How?

    -
    +
    +
    +

    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

    @@ -1027,6 +1132,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..03ad995 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); }); }; }]);