Skip to content

uiValidate v0.4.0 Docs #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 7 commits into from
Closed

uiValidate v0.4.0 Docs #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3c33cad
adding docs for route matching directive. refs #39
joseym Feb 4, 2013
1b70439
making scrolto work in firefox. closes #42
joseym Feb 12, 2013
98ca283
Merge branch 'master' of git://github.com/angular-ui/angular-ui.githu…
joseym Feb 12, 2013
89cebf9
removing uiRoute directive
joseym Feb 12, 2013
6158628
adding docs for v0.4.0 validate directive
joseym Feb 12, 2013
8063062
fixing tab spacing
joseym Feb 12, 2013
bed65e4
fixing tab spacing
joseym Feb 13, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
272 changes: 232 additions & 40 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,9 @@
<li><a scrollto href="#directives-select2">Select2</a></li>
<li><a scrollto href="#directives-showhide">Show / Hide / Toggle</a></li>
<li><a scrollto href="#directives-tinymce">TinyMCE</a></li>
<li><a scrollto href="#directives-sortable">Sortable</a></li>
<li><a scrollto href="#directives-currency">Currency</a></li>
<li><a scrollto href="#directives-routing">Route Matching</a></li>
</ul>
</li>
<li class="dropdown">
Expand Down Expand Up @@ -656,52 +658,64 @@ <h3>How?</h3>
</div>
</section>

<section id="directives-validate">
<div class="page-header">
<h1>Validate</h1>
</div>
<div class="row">
<div class="span6">
<h3>What?</h3>
<p>The <code>ui-validate</code> directive makes it very easy to use any function as a validation function for input elements using ngModel.</p>
<div class="well" ng-controller="ValidateCtrl">
<form name="form">

<label>e-mail</label>
<input name="email" type="email" required ng-model="email" ui-validate='{blacklist : notBlackListed}'>
<span ng-show='form.email.$error.blacklist'>This e-mail is black-listed!</span>
<br>is form valid: {{form.$valid}}
<br>email errors: {{form.email.$error | json}}
</form>
</div>
<h3>Why?</h3>
<p>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).</p>
</div>
<div class="span6">
<h3>How?</h3>
<p>Just add the 'ui-validate' directive to your input field.</p>
<p>2 types of syntax are supported:
<ul>
<li><code>ui-validate="validateFoo"</code></li>
<li><code>ui-validate="{foo : validateFoo, bar : validateBar}"</code></li>
</ul>
<section id="directives-validate">
<div class="page-header">
<h1>Validate</h1>
</div>
<div class="row">
<div class="span6">
<h3>What?</h3>
<p>The <code>ui-validate</code> directive makes it very easy to use any function as a validation function for input elements using ngModel.</p>
<div class="well" ng-controller="ValidateCtrl">
<form name="form">

<label>e-mail</label>
<input name="email" type="email" required ng-model="email" ui-validate="{ blacklist : 'notBlackListed($value)' }">
<span ng-show='form.email.$error.blacklist'>This e-mail is black-listed!</span>
<br>is form valid: {{form.$valid}}
<br>email errors: {{form.email.$error | json}}
</form>
</div>
<h3>Why?</h3>
<p>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).</p>
</div>
<div class="span6">
<h3>How?</h3>
<p>Just add the 'ui-validate' directive to your input field.</p>
<ul>
<li>Expressions and methods should be passed as strings: <code>ui-validate="'method($value)'"</code></li>
<li>Methods should be passed the <code>$value</code> variable.</li>
<li>2 types of syntax are supported:
<ul>
<li><code>ui-validate="'validateFoo($value)'"</code></li>
<li><code>ui-validate="{foo : 'validateFoo($value)', bar : 'validateBar($value)'}"</code></li>
</ul>
</li>
<li>The attribute <code>ui-validate-watch</code> can be used to watch another model and updates <code>ui-validate</code> whenever the passed model changes.
<ul>
<li><code>ui-validate-watch="'anotherModel'"</code></li>
<li><code>ui-validate-watch="{foo: 'anotherModel'}"</code></li>
</ul>
</li>
</ul>
<pre class="prettyprint" ng-non-bindable>
&lt;input ng-model="email" ui-validate='{blacklist : notBlackListed}'&gt;
&lt;input ng-model="email" ui-validate="{blacklist : 'notBlackListed($value)'}"&gt;
&lt;span ng-show='form.email.$error.blacklist'&gt;This e-mail is black-listed!&lt;/span&gt;
</pre>
and in a controller:
and in a controller:
<pre class="prettyprint" ng-non-bindable>
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;
};
}
</pre>
</p>
</div>
</div>
</section>
</p>
</div>

</div>
</section>

<section id="directives-reset" ng-controller="ResetCtrl">
<div class="page-header">
Expand Down Expand Up @@ -967,9 +981,100 @@ <h3>How?</h3>
</div>
</div>


</section>

<section id="directives-sortable" ng-controller="SortableCtrl">
<div class="page-header">
<h1>Sortable</h1>
</div>
<div class="row">
<div class="span6">
<h3>What?</h3>

<div class="row">
<div class="span3">
<p>Drag and drop the parents and children</p>
<div class="well">
<h3>Destroy Families</h3>
<p>You're not fit to be a mother!</p>
<ul ui-sortable ng-model="parents">
<li ng-repeat="parent in parents">
<ul>
<h5>{{parent.name}}</h5>
<ul class="children" ui-sortable="{connectWith:'.children'}" ng-model="parent.children">
<li ng-repeat="child in parent.children">{{child}}</li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
<div class="span3">
<pre>Parents: {{parents|json}}</pre>
</div>
</div>
</div>
<div class="span6">
<h3>How?</h3>
<pre class="prettyprint linenums" ng-non-bindable>
&lt;script&gt;
$scope.parents = [
{ name: 'Anna',
children: ['Alvin', 'Becky' ,'Charlie'] },
{ name: 'Barney',
children: ['Dorothy', 'Eric'] },
{ name: 'Chris',
children: ['Frank', 'Gary', 'Henry'] }
];
&lt;/script&gt;

&lt;ul <strong>ui-sortable ng-model=&quot;parents&quot;</strong>&gt;
&lt;li ng-repeat=&quot;parent in parents&quot;&gt;
&lt;h3&gt;{{parent.name}}&lt;/h3&gt;
&lt;ul <strong>class=&quot;children&quot;
ui-sortable=&quot;{connectWith:&#39;.children&#39;}&quot;
ng-model=&quot;parent.children&quot;&gt;</strong>
&lt;li ng-repeat=&quot;child in parent.children&quot;&gt;
{{child}}
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;</pre>
</div>
</div>
<div class="row">
<div class="span6">
<div class="row">
<div class="span3">
<div class="well">
<h3>Static Items</h3>
<ul ng-model="items" ui-sortable>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
</div>
<div class="span3">
<pre>Static Items: {{items|json}}</pre>
</div>
</div>
</div>
<div class="span6">
<pre class="prettyprint linenums" ng-non-bindable>
&lt;script&gt;
$scope.items = ['One', 'Two', 'Three'];
&lt;/script&gt;

&lt;ul ng-model=&quot;items&quot; ui-sortable&gt;
&lt;li&gt;First&lt;/li&gt;
&lt;li&gt;Second&lt;/li&gt;
&lt;li&gt;Third&lt;/li&gt;
&lt;/ul&gt;</pre>
</div>
</div>
</section>

<section id="directives-currency" ng-controller="CurrencyCtrl">
<div class="page-header">
<h1>Currency</h1>
Expand Down Expand Up @@ -1027,6 +1132,93 @@ <h3>How?</h3>


</section>

<section id="directives-routing" ng-controller="RouteCtrl">
<div class="page-header">
<h1>Route Checking</h1>
</div>

<div class="row">
<div class="span6">
<h3>What?</h3>
<p>Route Matching Magic. It matches your routes ... magically!</p>
<div class="well">
<p class="alert alert-info">Clicking <strong>"Make Active"</strong> will reload the page. Pay attention to the routes.</p>
<ul>
<li ui-route="#/directives-routing">uiRoute Info
<strong ui-if="$uiRoute">IS</strong>
<strong ui-if="!$uiRoute">is NOT</strong> active.
</li>
<li ng-repeat="route in routes" ui-route="#/route-{{ route }}">
Route {{ route }}
<strong ui-if="$uiRoute">IS</strong>
<strong ui-if="!$uiRoute">is NOT</strong> active.
<a ui-if="!$uiRoute" ng-click="reload($event, route)" href="#route-{{ route }}">Make Active</a>
</li>
</ul>
</div>
</div>

<div class="span6">
<h3>Why?</h3>
<p>It would be nice if your app knew what the address path was and acted accordingly, right? Right.</p>
</div>

<div class="span6">
<h3>Options</h3>
<ul>
<li>Out of the box this directive ships with a boolean to determine if the route matches or not: <code>$uiRoute</code>.
<ul>
<li>Example Usage: <code>&lt;a ui-route="/page" ng-class="{active: $uiRoute}"&gt;link&lt;/a&gt;</code></li>
</ul>
</li>
<li>Using <code>ui-route</code> as an attribute with value supports the following:
<ul style="margin-top: 5px;">
<li>Static: <code>&lt;a ui-route="/page"&gt;</code></li>
<li>Regular Expression: <code>&lt;a ui-route="/page/[0-9]*"&gt;</code></li>
<li>Template Vars: <code>&lt;a ui-route="/page/{{ sample }}"&gt;</code></li>
<li>Template Vars && RegEx: <code>&lt;a ui-route="/page/{{ sample }}/[0-9]*"&gt;</code></li>
</ul>
</li>
<li>Using <code>ui-route</code> with <code>ng-href</code> attribute:
<ul style="margin-top: 5px;">
<li>Static: <code>&lt;a ui-route ng-href="/page"&gt;</code></li>
<li>Template Vars: <code>&lt;a ui-route ng-href="/page/{{ sample }}"&gt;</code></li>
</ul>
</li>
<li>Using <code>ui-route</code> with <code>href</code> attribute:
<ul style="margin-top: 5px;">
<li>Static Only: <code>&lt;a ui-route ng-href="/page"&gt;</code></li>
</ul>
</li>
</ul>
</div>

</div>

<div class="row">
<div class="row span12">
<h3>How?</h3>
<pre class="prettyprint linenums" ng-non-bindable>
&lt;ul&gt;
&lt;li ui-route=&quot;#/route-1&quot;&gt;Route 1
&lt;strong ui-if=&quot;$uiRoute&quot;&gt;IS&lt;/strong&gt;
&lt;strong ui-if=&quot;!$uiRoute&quot;&gt;is NOT&lt;/strong&gt; active.
&lt;/li&gt;
&lt;li ui-route=&quot;#/route-2&quot;&gt;Route 2
&lt;strong ui-if=&quot;$uiRoute&quot;&gt;IS&lt;/strong&gt;
&lt;strong ui-if=&quot;!$uiRoute&quot;&gt;is NOT&lt;/strong&gt; active.
&lt;/li&gt;
&lt;li ui-route=&quot;#/route-3&quot;&gt;Route 3
&lt;strong ui-if=&quot;$uiRoute&quot;&gt;IS&lt;/strong&gt;
&lt;strong ui-if=&quot;!$uiRoute&quot;&gt;is NOT&lt;/strong&gt; active.
&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>

</div>
</section>

<section id="filters-highlight">
<div class="page-header">
Expand Down
2 changes: 1 addition & 1 deletion js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
};
}]);
Expand Down