Skip to content

Adding doc and examples for uiValidate #12

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

Merged
merged 1 commit into from
Aug 13, 2012
Merged

Adding doc and examples for uiValidate #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
68 changes: 58 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
<li><a scrollto href="#directives-keypress">Keypress</a></li>
<li><a scrollto href="#directives-mask">Mask</a></li>
<li><a scrollto href="#directives-if">If</a></li>
<li><a scrollto href="#directives-validate">Validate</a></li>
<li><a scrollto href="#directives-reset">Reset</a></li>
<li><a scrollto href="#directives-animate">Animate</a></li>
<li><a scrollto href="#directives-modal">Modal</a></li>
Expand Down Expand Up @@ -156,7 +157,7 @@ <h3>How?</h3>
&lt;script&gt;
myModule.value(&#x27;ui.config&#x27;, {
// The ui-jq directive namespace
jq: {
jq: {
// The qtip namespace
qtip: {
// qTip options. This object will be used as the defaults
Expand Down Expand Up @@ -217,7 +218,7 @@ <h3>How?</h3>
</div>
</div>
</section>

<section id="directives-map" ng-controller="MapCtrl">
<div class="page-header">
<h1>Google Maps</h1>
Expand All @@ -234,21 +235,21 @@ <h4>Click to add a marker!</h4>
</a>
</li>
</ul>

<!-- this is the confusing part. we have to point the map marker directive
at an existing google.maps.Marker object, so it can hook up events -->
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
ui-event="{'map-click': 'openMarkerInfo(marker)'}">
</div>

<div ui-map-info-window="myInfoWindow">
<h1>Marker</h1>
Lat: <input ng-model="currentMarkerLat">, Lng: <input ng-model="currentMarkerLng">
<a class="btn btn-primary" ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>
</div>
</div>
<div ui-map="myMap" class="span8 map"
ui-event="{'map-click': 'addMarker($event)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
ui-event="{'map-click': 'addMarker($event)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
ui-options="mapOptions">
</div>
</div>
Expand Down Expand Up @@ -277,7 +278,7 @@ <h3>How?</h3>
&lt;/div&gt;

&lt;div ui-map=&quot;myMap&quot; class=&quot;map&quot;
ui-event=&quot;{&#x27;map-click&#x27;: &#x27;addMarker($event)&#x27;, &#x27;map-zoom_changed&#x27;: &#x27;setZoomMessage(myMap.getZoom())&#x27; }&quot;
ui-event=&quot;{&#x27;map-click&#x27;: &#x27;addMarker($event)&#x27;, &#x27;map-zoom_changed&#x27;: &#x27;setZoomMessage(myMap.getZoom())&#x27; }&quot;
ui-options=&quot;mapOptions&quot;&gt;
&lt;/div&gt;

Expand All @@ -288,7 +289,7 @@ <h3>How?</h3>
center: new google.maps.LatLng(35.784, -78.670),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
};

$scope.addMarker = function($event) {
$scope.myMarkers.push(new google.maps.Marker({
Expand Down Expand Up @@ -333,13 +334,13 @@ <h3>What?</h3>
<p>Calendar picker with ng-model integration</p>
<div class="well">
<ng-form name="dateForm">
<p><input name="dateField" value="Click Here for Datepicker" ng-model="date" ui-date></p>
<p><input name="dateField" value="Click Here for Datepicker" ng-model="date" ui-date></p>
</ng-form>
<p>Selected Date: {{ date }}</p>
<p>Formatted Date: {{ date | date: 'mediumDate'}}</p>
<p>Selected Month: {{ date.getMonth() }}</p>
<div ng-model="date" ui-date></div>
</div>
</div>
</div>
<div class="span6">
<h3>Why?</h3>
Expand Down Expand Up @@ -400,7 +401,7 @@ <h3>Why?</h3>
<h3>How?</h3>
<pre class="prettyprint" ng-non-bindable>
&lt;input ng-model="maskDemo" ui-mask="'99-99-9999'"&gt;

</pre>
</section>

Expand Down Expand Up @@ -456,6 +457,53 @@ <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>
<pre class="prettyprint" ng-non-bindable>
&lt;input ng-model="email" ui-validate='{blacklist : notBlackListed}'&gt;
&lt;span ng-show='form.email.$error.blacklist'&gt;This e-mail is black-listed!&lt;/span&gt;
</pre>
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;
};
}
</pre>
</p>
</div>
</div>
</section>

<section id="directives-reset" ng-controller="ResetCtrl">
<div class="page-header">
<h1>Reset</h1>
Expand Down
8 changes: 8 additions & 0 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,14 @@ function KeypressCtrl($scope) {
};
}

function ValidateCtrl($scope) {

$scope.blackList = ['bad@domain.com','verybad@domain.com'];
$scope.notBlackListed = function(value) {
return $scope.blackList.indexOf(value) === -1;
};
}

function ScrollfixCtrl($scope) {
$scope.scrollfix = -50;
}
Expand Down