You are on page 1of 1

CHEAT ng:click Executes custom behavior date Checks if user input is a

Paging for Lists


when element is clicked. valid date. jQuery Mobile Angular Adapter
SHEET ng:controller Creates a controller and links email Checks if user input is a Lists can be paged in the sense that only some
it to the DOM. valid email. ngm:shared- Directive to share the same
controller= instance of a controller entries of an array in the controller are shown.
integer Checks if user input is a
Hello World Example Filters valid integer.
"var1:Ctrl1,..." between mobile pages. The
<ul data-role="listview">
shared controller is saved
Json Checks if user input is a <li ng:repeat="item in list.$paged()">
{{expression|<filter-name>: into a variable.
Code: valid JSON. {{item}}
<param1>:<param2>:…}} E.g. <div ngm:shared-
number Checks if user input is a </li>
currency Formats a number as a controller="rental:RentalCont
<!doctype html> valid number. <li ngm:if="list.$paged().hasMorePages()">
currency. roller">
<html xmlns:ng="http://angularjs.org"> phone Checks if user input is a <a href="#"
date Formats a number as a date. ngm:<event>= Directives for general event
<script src="http://code.angularjs.org/angular- valid phone number. ngm:click="list.$paged().loadNextPage()">
E.g. {{1288323623006 | "action()“ handlers. E.g.
0.9.19.min.js" ng:autobind></script> regexp Restricts valid input to a Load more
<body> date:'yyyy-MM-dd HH:mm:ss <a href=“#“
specified regular </a>
Your name: <input type="text" name="yourname" Z'}} ngm:click=“myFn()“>
expression pattern. </li>
value="World"/> html Prevents the input from getting <a href=“#“ngm:
url Validates that user input is </ul>
<hr/> escaped by angular. pageforeshow=“myFn()“>
a well formed URL.
Hello {{yourname}}! json Converts a JavaScript object
</body></html> into JSON string.
linky Turns links into html links. Custom Validator ngm:if Conditionally changes DOM
structure.
Result: lowercase Lowercases a string. Similar to ng:switch, but
angular.validator(<name>, function(input
number Formats a number as text [, additional params]) { does not need nested
Usage:{{number_expression| [your validation code]; elements.
number[:fractionSize] }} if ( [validation succeeds] ) {
return false;
$waitDialog: A service to access the
} else {
Custom Filter return "my error message";
- show([msg]) jQuery Mobile Wait Dialog.
- hide() E.g.
angular.filter(<name>, }
- waitFor( this.$waitDialog.show('Please
function(input[,additional params]) { }
promise[, msg]) wait');
Widgets return uiValue;
ng:non-bindable Blocks angular from } Services $navigate( A service to change the
processing an HTML element. ); '[transition:] current page, optionally
$defer( Defers function
pageId') using a defined transition.
ng:repeat Creates a collection of cloned
HTML elements
Formatters callback[,delay]) execution.
transition="back":
ng:format="<formatter-name>" $invalidWidgets Holds references to
ng:required Verifies presence of user invalid widgets. The browser will go back in
input. boolean Formats user input as $updateView Queues view updates. history to the defined page.
ng:validate Validates content of user Boolean. $xhr( Generates an XHR pageId="back":
input json Formats user input as JSON. method, url[, post], request. Goes back one step in
ng:view Works with $route to list Formats user input strings as history.
success, error) Kirchstraße 6 | 51647 Gummersbach
"include" partial templates. an array.
Navigation Expressions Telefon 02261 6001-0 | Fax -4200
ng:switch Conditionally changes DOM number Formats user input string as Custom Service $navigate(test,
structure. number.
trim Trims leading and trailing angular.service(<name>, 'outcome1[:transition1]:page1',…) info@opitz-consulting.com
ng:include Includes an external HTML
fragment. spaces from user input. function(dep1) { www.opitz-consulting.com/go_mobile
Specifies navigation based on outcomes. This will
ng:options Dynamically generates a list return someService;
execute the navigation whose outcome equals test.
of <option> elements for a Custom Formatter }, {$inject: ['dep1']});
If test is a promise, this will use the result of the
<select> element using an promise.
array or an object.
angular.formatter(<name>, { Controllers outcome="failure"
parse: function(value){ … },
<div ng:controller="SomeController"> Special outcome for the false value or a failed
format: function(value { … }
Directives );
function SomeController(dep1) {…} promise.
ng:submit Binds angular expressions to
SomeController.$inject = ['dep1']; outcome="success" www.youtube.com/opitzconsulting
www.youtube.com/opitzconsulting
onsubmit events. Validators Special outcome for all cases where "failure"
ng:change Runs an expression when an ng:validate="<validator-name>[:param1][:param2] this.$watch( Registers listener as a
does not match. www.slideshare.net/opitzconsulting
input widget’s value changes. [:..]" This can be used directly in HTML pages, e.g. www.slideshare.net/opitzconsulting
<watchExpr>, callback to be executed
ng:class Conditionally set CSS class <a href="" ngm:click="$navigate(save(), www.xing.com/group-51062.460375
asynchronous Provides asynchronous function(value) {...} every time a watchExp
on an element. validation via a callback ) changes.
'success:homepage', 'failure:errorpage')"> www.xing.com/net/opitzconsulting
function.
www.twitter.com/oc_wire

You might also like