\documentclass[10pt,a4paper]{article} % Packages \usepackage{fancyhdr} % For header and footer \usepackage{multicol} % Allows multicols in tables \usepackage{tabularx} % Intelligent column widths \usepackage{tabulary} % Used in header and footer \usepackage{hhline} % Border under tables \usepackage{graphicx} % For images \usepackage{xcolor} % For hex colours %\usepackage[utf8x]{inputenc} % For unicode character support \usepackage[T1]{fontenc} % Without this we get weird character replacements \usepackage{colortbl} % For coloured tables \usepackage{setspace} % For line height \usepackage{lastpage} % Needed for total page number \usepackage{seqsplit} % Splits long words. %\usepackage{opensans} % Can't make this work so far. Shame. Would be lovely. \usepackage[normalem]{ulem} % For underlining links % Most of the following are not required for the majority % of cheat sheets but are needed for some symbol support. \usepackage{amsmath} % Symbols \usepackage{MnSymbol} % Symbols \usepackage{wasysym} % Symbols %\usepackage[english,german,french,spanish,italian]{babel} % Languages % Document Info \author{Roman K. (Roman)} \pdfinfo{ /Title (angular-js-directives-v-1-3-0.pdf) /Creator (Cheatography) /Author (Roman K. (Roman)) /Subject (Angular Js Directives v.1.3.0 Cheat Sheet) } % Lengths and widths \addtolength{\textwidth}{6cm} \addtolength{\textheight}{-1cm} \addtolength{\hoffset}{-3cm} \addtolength{\voffset}{-2cm} \setlength{\tabcolsep}{0.2cm} % Space between columns \setlength{\headsep}{-12pt} % Reduce space between header and content \setlength{\headheight}{85pt} % If less, LaTeX automatically increases it \renewcommand{\footrulewidth}{0pt} % Remove footer line \renewcommand{\headrulewidth}{0pt} % Remove header line \renewcommand{\seqinsert}{\ifmmode\allowbreak\else\-\fi} % Hyphens in seqsplit % This two commands together give roughly % the right line height in the tables \renewcommand{\arraystretch}{1.3} \onehalfspacing % Commands \newcommand{\SetRowColor}[1]{\noalign{\gdef\RowColorName{#1}}\rowcolor{\RowColorName}} % Shortcut for row colour \newcommand{\mymulticolumn}[3]{\multicolumn{#1}{>{\columncolor{\RowColorName}}#2}{#3}} % For coloured multi-cols \newcolumntype{x}[1]{>{\raggedright}p{#1}} % New column types for ragged-right paragraph columns \newcommand{\tn}{\tabularnewline} % Required as custom column type in use % Font and Colours \definecolor{HeadBackground}{HTML}{333333} \definecolor{FootBackground}{HTML}{666666} \definecolor{TextColor}{HTML}{333333} \definecolor{DarkBackground}{HTML}{80A343} \definecolor{LightBackground}{HTML}{F7F9F3} \renewcommand{\familydefault}{\sfdefault} \color{TextColor} % Header and Footer \pagestyle{fancy} \fancyhead{} % Set header to blank \fancyfoot{} % Set footer to blank \fancyhead[L]{ \noindent \begin{multicols}{3} \begin{tabulary}{5.8cm}{C} \SetRowColor{DarkBackground} \vspace{-7pt} {\parbox{\dimexpr\textwidth-2\fboxsep\relax}{\noindent \hspace*{-6pt}\includegraphics[width=5.8cm]{/web/www.cheatography.com/public/images/cheatography_logo.pdf}} } \end{tabulary} \columnbreak \begin{tabulary}{11cm}{L} \vspace{-2pt}\large{\bf{\textcolor{DarkBackground}{\textrm{Angular Js Directives v.1.3.0 Cheat Sheet}}}} \\ \normalsize{by \textcolor{DarkBackground}{Roman K. (Roman)} via \textcolor{DarkBackground}{\uline{cheatography.com/19465/cs/2481/}}} \end{tabulary} \end{multicols}} \fancyfoot[L]{ \footnotesize \noindent \begin{multicols}{3} \begin{tabulary}{5.8cm}{LL} \SetRowColor{FootBackground} \mymulticolumn{2}{p{5.377cm}}{\bf\textcolor{white}{Cheatographer}} \\ \vspace{-2pt}Roman K. (Roman) \\ \uline{cheatography.com/roman} \\ \end{tabulary} \vfill \columnbreak \begin{tabulary}{5.8cm}{L} \SetRowColor{FootBackground} \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Cheat Sheet}} \\ \vspace{-2pt}Published 12th May, 2016.\\ Updated 12th May, 2016.\\ Page {\thepage} of \pageref{LastPage}. \end{tabulary} \vfill \columnbreak \begin{tabulary}{5.8cm}{L} \SetRowColor{FootBackground} \mymulticolumn{1}{p{5.377cm}}{\bf\textcolor{white}{Sponsor}} \\ \SetRowColor{white} \vspace{-5pt} %\includegraphics[width=48px,height=48px]{dave.jpeg} Measure your website readability!\\ www.readability-score.com \end{tabulary} \end{multicols}} \begin{document} \raggedright \raggedcolumns % Set font size to small. Switch to any value % from this page to resize cheat sheet text: % www.emerson.emory.edu/services/latex/latex_169.html \footnotesize % Small font. \begin{multicols*}{2} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{A}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Modifies the default behavior of the html A tag so that the default action is prevented when the href attribute is empty. \newline % Row Count 3 (+ 3) {\emph{Priority level: 0}} \newline % Row Count 4 (+ 1) Example: \newline % Row Count 5 (+ 1) `\textless{}a href="" ng-click="list.addItem()"\textgreater{}Add Item\textless{}/a\textgreater{}`% Row Count 7 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{Form}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Submitting a form and preventing the default action. \newline % Row Count 2 (+ 2) CSS classes: \newline % Row Count 3 (+ 1) {\bf{ng-valid}} is set if the form is valid. \newline % Row Count 4 (+ 1) {\bf{ng-invalid}} is set if the form is invalid. \newline % Row Count 5 (+ 1) {\bf{ng-pristine}} is set if the form is pristine. \newline % Row Count 7 (+ 2) {\bf{ng-dirty}} is set if the form is dirty. \newline % Row Count 8 (+ 1) {\bf{ng-submitted}} is set if the form was submitted.% Row Count 10 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{{\emph{Arguments:}} \newline {\bf{name}}(optional, string): If specified, the form controller will be published into related scope, under this name. \newline {\emph{Priority level 0}}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngApp}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the \textless{}body\textgreater{} or \textless{}html\textgreater{} tags. \newline % Row Count 5 (+ 5) {\bf{ngApp}} - \{angular.Module\} - an optional application module name to load. \newline % Row Count 7 (+ 2) {\bf{ngStrictDi}} (optional) - \{boolean\} - if this attribute is present on the app element, the injector will be created in "strict-di" mode. This means that the application will fail to invoke functions which do not use explicit function annotation (and are thus unsuitable for minification), as described in the Dependency Injection guide, and useful debugging info will assist in tracking down the root of these bugs.% Row Count 16 (+ 9) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngBind}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes. \newline % Row Count 5 (+ 5) {\bf{ngBind}} - \{expression\} - Expression to evaluate.% Row Count 7 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngBindHtml}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Creates a binding that will innerHTML the result of evaluating the expression into the current element in a secure way. By default, the innerHTML-ed content will be sanitized using the \$sanitize service. To utilize this functionality, ensure that \$sanitize is available, for example, by including ngSanitize in your module's dependencies (not in core Angular.) You may also bypass sanitization for values you know are safe. To do so, bind to an explicitly trusted value via \$sce.trustAsHtml. See the example under Strict Contextual Escaping (SCE). \newline % Row Count 11 (+ 11) {\bf{ngBindHtml}} - \{expression\} - Expression to evaluate.% Row Count 13 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngBindTemplate}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngBindTemplate directive specifies that the element text content should be replaced with the interpolation of the template in the ngBindTemplate attribute. Unlike ngBind, the ngBindTemplate can contain multiple \{\{ \}\} expressions. This directive is needed since some HTML elements (such as TITLE and OPTION) cannot contain SPAN elements. \newline % Row Count 7 (+ 7) {\bf{ngBindTemplate}} - \{string\} - template of form \{\{ expression \}\} to eval.% Row Count 9 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngBlur}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Specify custom behavior on blur event. \newline % Row Count 1 (+ 1) Note: As the blur event is executed synchronously also during DOM manipulations (e.g. removing a focussed input), AngularJS executes the expression using scope.\$evalAsync if the event is fired during an \$apply to ensure a consistent state. \newline % Row Count 6 (+ 5) {\bf{ngBlur}} - \{expression\} - Expression to evaluate upon blur. (Event object is available as \$event)% Row Count 8 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngChange}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Evaluate the given expression when the user changes the input. The expression is evaluated immediately, unlike the JavaScript onchange event which only triggers at the end of a change (usually, when the user leaves the form element or presses the return key). \newline % Row Count 6 (+ 6) Note, this directive requires ngModel to be present. \newline % Row Count 8 (+ 2) {\bf{ngChange}} - \{expression\} - Expression to evaluate upon change in input value.% Row Count 10 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngChecked}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The HTML specification does not require browsers to preserve the values of boolean attributes such as checked. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The ngChecked directive solves this problem for the checked attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information. \newline % Row Count 11 (+ 11) Argument: \newline % Row Count 12 (+ 1) {\bf{ngChecked}} - \{expression\} - If the expression is truthy, then special attribute "checked" will be set on the element% Row Count 15 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngClass}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added. \newline % Row Count 4 (+ 4) The directive operates in three different ways, depending on which of three types the expression evaluates to: \newline % Row Count 7 (+ 3) - If the expression evaluates to a string, the string should be one or more space-delimited class names. \newline % Row Count 10 (+ 3) - If the expression evaluates to an array, each element of the array should be a string that is one or more space-delimited class names. \newline % Row Count 13 (+ 3) - If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name. \newline % Row Count 17 (+ 4) The directive won't add duplicate classes if a particular class was already set. \newline % Row Count 19 (+ 2) When the expression changes, the previously added classes are removed and only then the new classes are added. \newline % Row Count 22 (+ 3) Animations: \newline % Row Count 23 (+ 1) add - happens just before the class is applied to the element remove - happens just before the class is removed from the element \newline % Row Count 26 (+ 3) Arguments: \newline % Row Count 27 (+ 1) {\bf{ngClass}} - \{expression\} - Expression to eval. The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.% Row Count 34 (+ 7) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngClassEven ngClassOdd}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngClassOdd and ngClassEven directives work exactly as ngClass, except they work in conjunction with ngRepeat and take effect only on odd (even) rows. \newline % Row Count 4 (+ 4) Usage: \newline % Row Count 5 (+ 1) as attribute: \newline % Row Count 6 (+ 1) \textless{}ANY \newline % Row Count 7 (+ 1) ng-class-even=""\textgreater{} \newline % Row Count 8 (+ 1) ... \newline % Row Count 9 (+ 1) \textless{}/ANY\textgreater{} \newline % Row Count 10 (+ 1) as CSS class: \newline % Row Count 11 (+ 1) \textless{}ANY class="ng-class-even: ;"\textgreater{} ... \textless{}/ANY\textgreater{} \newline % Row Count 12 (+ 1) Arguments \newline % Row Count 13 (+ 1) {\bf{ngClassEven | ngClassOdd}} - \{expression\} - Expression to eval. The result of the evaluation can be a string representing space delimited class names or an array.% Row Count 17 (+ 4) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngClick}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngClick directive allows you to specify custom behavior when an element is clicked. \newline % Row Count 2 (+ 2) Arguments: \newline % Row Count 3 (+ 1) {\bf{ngClick}} - \{expression\} - Expression to evaluate upon click. (Event object is available as \$event)% Row Count 6 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngCloak}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.% Row Count 6 (+ 6) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngController}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngController directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern. \newline % Row Count 4 (+ 4) MVC components in angular: \newline % Row Count 5 (+ 1) Model — Models are the properties of a scope; scopes are attached to the DOM where scope properties are accessed through bindings. \newline % Row Count 8 (+ 3) View — The template (HTML with data bindings) that is rendered into the View. \newline % Row Count 10 (+ 2) Controller — The ngController directive specifies a Controller class; the class contains business logic behind the application to decorate the scope with functions and values \newline % Row Count 14 (+ 4) Arguments \newline % Row Count 15 (+ 1) {\bf{ngController}} - \{expression\} - Name of a constructor function registered with the current \$controllerProvider or an expression that on the current scope evaluates to a constructor function. The controller instance can be published into a scope property by specifying ng-controller="as propertyName". If the current \$controllerProvider is configured to use globals (via \seqsplit{\$controllerProvider.allowGlobals())}, this may also be the name of a globally accessible constructor function (not recommended).% Row Count 25 (+ 10) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngCopy}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Specify custom behavior on copy event. \newline % Row Count 1 (+ 1) Arguments: \newline % Row Count 2 (+ 1) {\bf{ngCopy}} - \{expression\} - Expression to evaluate upon copy. (Event object is available as \$event)% Row Count 4 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngCsp}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Enables CSP (Content Security Policy) support. \newline % Row Count 1 (+ 1) This is necessary when developing things like Google Chrome Extensions. \newline % Row Count 3 (+ 2) CSP forbids apps to use eval or Function(string) generated functions (among other things). For Angular to be CSP compatible there are only two things that we need to do differently: \newline % Row Count 7 (+ 4) - don't use Function constructor to generate optimized value getters \newline % Row Count 9 (+ 2) - don't inject custom stylesheet into the document \newline % Row Count 11 (+ 2) AngularJS uses Function(string) generated functions as a speed optimization. Applying the ngCsp directive will cause Angular to use CSP compatibility mode. When this mode is on AngularJS will evaluate all expressions up to 30\% slower than in non-CSP mode, but no security violations will be raised.% Row Count 17 (+ 6) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngCut}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Specify custom behavior on cut event. \newline % Row Count 1 (+ 1) {\bf{ngCut}} - \{expression\} - Expression to evaluate upon cut. (Event object is available as \$event)% Row Count 3 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngKeydown}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Specify custom behavior on keydown event. \newline % Row Count 1 (+ 1) Arguments: \newline % Row Count 2 (+ 1) {\bf{ngKeydown}} - \{expression\} - Expression to evaluate upon keydown. (Event object is available as \$event and can be interrogated for keyCode, altKey, etc.)% Row Count 6 (+ 4) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngKeypress}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Specify custom behavior on keypress event. \newline % Row Count 1 (+ 1) Arguments: \newline % Row Count 2 (+ 1) {\bf{ngKeypress}} - \{expression\} - Expression to evaluate upon keypress. (Event object is available as \$event and can be interrogated for keyCode, altKey, etc.)% Row Count 6 (+ 4) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngKeyup}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Specify custom behavior on keyup event. \newline % Row Count 1 (+ 1) Arguments: \newline % Row Count 2 (+ 1) {\bf{ngKeyup}} - \{expression\} - Expression to evaluate upon keyup. (Event object is available as \$event and can be interrogated for keyCode, altKey, etc.)% Row Count 6 (+ 4) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngList}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Text input that converts between a delimited string and an array of strings. The default delimiter is a comma followed by a space - equivalent to ng-list=", ". You can specify a custom delimiter as the value of the ngList attribute - for example, ng-list=" | ". \newline % Row Count 6 (+ 6) Arguments: \newline % Row Count 7 (+ 1) {\bf{ngList}} (optional) - \{string\} - optional delimiter that should be used to split the value.% Row Count 9 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngModel}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.% Row Count 4 (+ 4) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngModelOptions}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Allows tuning how model updates are done. Using ngModelOptions you can specify a custom list of events that will trigger a model update and/or a debouncing delay so that the actual update only takes place when a timer expires; this timer will be reset after another change takes place. \newline % Row Count 6 (+ 6) Arguments: \newline % Row Count 7 (+ 1) {\bf{ngModelOptions}} - \{Object\} - options to apply to the current model. Valid keys are: \newline % Row Count 9 (+ 2) {\emph{updateOn}}: string specifying which event should be the input bound to. You can set several events using an space delimited list. There is a special event called default that matches the default events belonging of the control. \newline % Row Count 14 (+ 5) {\emph{debounce}}: integer value which contains the debounce model update value in milliseconds. A value of 0 triggers an immediate update. If an object is supplied instead, you can specify a custom value for each event. For example: ng-model-options="\{ updateOn: 'default blur', debounce: \{'default': 500, 'blur': 0\} \}" \newline % Row Count 21 (+ 7) {\emph{getterSetter}}: boolean value which determines whether or not to treat functions bound to ngModel as getters/setters. \newline % Row Count 24 (+ 3) {\emph{timezone}}: Defines the timezone to be used to read/write the Date instance in the model for \textless{}input type="date"\textgreater{}, \textless{}input type="time"\textgreater{}, ... . Right now, the only supported value is 'UTC', otherwise the default timezone of the browser will be used.% Row Count 29 (+ 5) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngMousedown}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngMousedown directive allows you to specify custom behavior on mousedown event. \newline % Row Count 2 (+ 2) Arguments: \newline % Row Count 3 (+ 1) {\bf{ngMousedown}} - \{expression\} - Expression to evaluate upon mousedown. (Event object is available as \$event)% Row Count 6 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngMouseenter}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Specify custom behavior on mouseenter event. \newline % Row Count 1 (+ 1) Arguments: \newline % Row Count 2 (+ 1) {\bf{ngMouseenter}} - \{expression\} - Expression to evaluate upon mouseenter. (Event object is available as \$event)% Row Count 5 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngMouseleave}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Specify custom behavior on mouseleave event. \newline % Row Count 1 (+ 1) Arguments: \newline % Row Count 2 (+ 1) {\bf{ngMouseleave}} - \{expression\} - Expression to evaluate upon mouseleave. (Event object is available as \$event)% Row Count 5 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngMousemove}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Specify custom behavior on mousemove event. \newline % Row Count 1 (+ 1) Arguments: \newline % Row Count 2 (+ 1) {\bf{ngMousemove}} - \{expression\} - Expression to evaluate upon mousemove. (Event object is available as \$event)% Row Count 5 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngMouseover}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{Specify custom behavior on mouseover event.}} \newline % Row Count 1 (+ 1) Arguments: \newline % Row Count 2 (+ 1) {\bf{ngMouseover}} - \{expression\} - Expression to evaluate upon mouseover. (Event object is available as \$event)% Row Count 5 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngMouseup}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Specify custom behavior on mouseup event. \newline % Row Count 1 (+ 1) Arguments: \newline % Row Count 2 (+ 1) {\bf{ngMouseup}} - \{expression\} - Expression to evaluate upon mouseup. (Event object is available as \$event)% Row Count 5 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngNonBindable}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngNonBindable directive tells Angular not to compile or bind the contents of the current DOM element. This is useful if the element contains what appears to be Angular directives and bindings but which should be ignored by Angular. This could be the case if you have a site that displays snippets of code, for instance.% Row Count 7 (+ 7) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngOpen}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The HTML specification does not require browsers to preserve the values of boolean attributes such as open. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The ngOpen directive solves this problem for the open attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information. \newline % Row Count 11 (+ 11) Arguments: \newline % Row Count 12 (+ 1) {\bf{ngOpen}} - \{expression\} - If the expression is truthy, then special attribute "open" will be set on the element.% Row Count 15 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngPaste}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Specify custom behavior on paste event. \newline % Row Count 1 (+ 1) Arguments: \newline % Row Count 2 (+ 1) {\bf{ngPaste}} - \{expression\} - Expression to evaluate upon paste. (Event object is available as \$event)% Row Count 5 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngPluralize}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{ngPluralize is a directive that displays messages according to en-US localization rules. These rules are bundled with angular.js, but can be overridden (see Angular i18n dev guide). You configure ngPluralize directive by specifying the mappings between plural categories and the strings to be displayed. \newline % Row Count 7 (+ 7) Arguments: \newline % Row Count 8 (+ 1) {\bf{count}} - \{string | expression\} - The variable to be bound to. \newline % Row Count 10 (+ 2) {\bf{when}} - \{string\} - The mapping between plural category to its corresponding strings. \newline % Row Count 12 (+ 2) {\bf{offset}} (optional) - \{number\} - Offset to deduct from the total number.% Row Count 14 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngReadonly}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The HTML specification does not require browsers to preserve the values of boolean attributes such as readonly. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The ngReadonly directive solves this problem for the readonly attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information. \newline % Row Count 11 (+ 11) Arguments: \newline % Row Count 12 (+ 1) {\bf{ngReadonly}} - \{expression\} - If the expression is truthy, then special attribute "readonly" will be set on the element% Row Count 15 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngRepeat}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and \$index is set to the item index or key. \newline % Row Count 5 (+ 5) Special properties are exposed on the local scope of each template instance, including: \newline % Row Count 7 (+ 2) {\bf{\$index}} - {\emph{number}} - iterator offset of the repeated element (0..length-1) \newline % Row Count 9 (+ 2) {\bf{\$first}} - {\emph{boolean}} - true if the repeated element is first in the iterator. \newline % Row Count 11 (+ 2) {\bf{\$middle}} - {\emph{boolean}} - true if the repeated element is between the first and last in the iterator. \newline % Row Count 14 (+ 3) {\bf{\$last}} - {\emph{boolean}} - true if the repeated element is last in the iterator. \newline % Row Count 16 (+ 2) {\bf{\$even}} - {\emph{boolean}} - true if the iterator position \$index is even (otherwise false). \newline % Row Count 18 (+ 2) {\bf{\$odd}} - {\emph{boolean}} - true if the iterator position \$index is odd (otherwise false). \newline % Row Count 20 (+ 2) Arguments: \newline % Row Count 21 (+ 1) {\bf{ngRepeat}} - \{repeat\_expression\} - The expression indicating how to enumerate a collection. These formats are currently supported: \newline % Row Count 24 (+ 3) {\emph{variable in expression}} – where variable is the user defined loop variable and expression is a scope expression giving the collection to enumerate. \newline % Row Count 28 (+ 4) For example: album in artist.albums. \newline % Row Count 29 (+ 1) {\emph{(key, value) in expression}} – where key and value can be any user defined identifiers, and expression is the scope expression giving the collection to enumerate. \newline % Row Count 33 (+ 4) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngRepeat (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{ For example: (name, age) in \{'adam':10, 'amalie':12\}. \newline % Row Count 2 (+ 2) {\emph{variable in expression track by tracking\_expression}} – You can also provide an optional tracking function which can be used to associate the objects in the collection with the DOM elements. If no tracking function is specified the ng-repeat associates elements by identity in the collection. It is an error to have more than one tracking function to resolve to the same key. (This would mean that two distinct objects are mapped to the same DOM element, which is not possible.) Filters should be applied to the expression, before specifying a tracking expression. \newline % Row Count 14 (+ 12) For example: item in items is equivalent to item in items track by \$id(item). This implies that the DOM elements will be associated by item identity in the array. \newline % Row Count 18 (+ 4) {\emph{variable in expression as alias\_expression}} – You can also provide an optional alias expression which will then store the intermediate results of the repeater after the filters have been applied. Typically this is used to render a special message when a filter is active on the repeater, but the filtered result set is empty. \newline % Row Count 25 (+ 7) For example: item in items | filter:x as results will store the fragment of the repeated items as results, but only after the items have been processed through the filter. \newline % Row Count 29 (+ 4) For example: item in items track by \$id(item). A built in \$id() function can be used to assign a unique \$\$hashKey property to each item in the array. This property is then used as a key to associated DOM elements with the corresponding item in the array by identity. Moving the same object in array would move the DOM element in the same way in the DOM. \newline % Row Count 37 (+ 8) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngRepeat (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{ For example: item in items track by item.id is a typical pattern when the items come from the database. In this case the object identity does not matter. Two objects are considered equivalent as long as their id property is same. \newline % Row Count 5 (+ 5) For example: item in items | filter:searchText track by item.id is a pattern that might be used to apply a filter to items in conjunction with a tracking expression.% Row Count 9 (+ 4) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngSelected}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The HTML specification does not require browsers to preserve the values of boolean attributes such as selected. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The ngSelected directive solves this problem for the selected attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information. \newline % Row Count 11 (+ 11) Arguments: \newline % Row Count 12 (+ 1) {\bf{ngSelected}} - \{expression\} - If the expression is truthy, then special attribute "selected" will be set on the element% Row Count 15 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngShow}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angular-csp.css to your html file (see ngCsp). \newline % Row Count 8 (+ 8) Arguments: \newline % Row Count 9 (+ 1) {\bf{ngShow}} - \{expression\} - If the expression is truthy then the element is shown or hidden respectively.% Row Count 12 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{input}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{HTML input element control with angular data-binding. \newline % Row Count 2 (+ 2) Arguments: \newline % Row Count 3 (+ 1) {\bf{ngModel}}(string): Assignable angular expression to data-bind to. \newline % Row Count 5 (+ 2) {\bf{name}}(optional, string): Property name of the form under which the control is published. \newline % Row Count 7 (+ 2) {\bf{required}}(optional, string): Sets required validation error key if the value is not entered. \newline % Row Count 9 (+ 2) {\bf{ngRequired}}(optional, boolean): Sets required attribute if set to true \newline % Row Count 11 (+ 2) {\bf{ngMinlength}}(optional,number): Sets minlength validation error key if the value is shorter than minlength. \newline % Row Count 14 (+ 3) {\bf{ngMaxlength}}(optional,number): Sets maxlength validation error key if the value is longer than maxlength. \newline % Row Count 17 (+ 3) {\bf{ngPattern}}(optional, string): Sets pattern validation error key if the value does not match the RegExp pattern expression. Expected value is /regexp/ for inline patterns or regexp for patterns defined as scope expressions. \newline % Row Count 22 (+ 5) {\bf{ngChange}}(optional,string) Angular expression to be executed when input changes due to user interaction with the input element.% Row Count 25 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{{\emph{priority level 0}}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{input{[}checkbox{]}}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{HTML checkbox. \newline % Row Count 1 (+ 1) Arguments: \newline % Row Count 2 (+ 1) {\bf{ngModel}}, {\emph{string}}: Assignable angular expression to data-bind to. \newline % Row Count 4 (+ 2) {\bf{name}}(optional), {\emph{string}}: Property name of the form under which the control is published. \newline % Row Count 6 (+ 2) {\bf{ngTrueValue}}(optional), {\emph{expression}}: The value to which the expression should be set when selected. \newline % Row Count 9 (+ 3) {\bf{ngFalseValue}}(optional), {\emph{expression}}: The value to which the expression should be set when not selected. \newline % Row Count 12 (+ 3) {\bf{ngChange}}(optional), {\emph{string}}: Angular expression to be executed when input changes due to user interaction with the input element.% Row Count 15 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{{\emph{Priority level 0}}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{input{[}dateTimeLocal{]}}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Input with datetime validation and transformation. In browsers that do not yet support the HTML5 date input, a text element will be used. In that case, the text must be entered in a valid ISO-8601 local datetime format (yyyy-MM-ddTHH:mm), for example: 2010-12-28T14:57. The model must be a Date object. \newline % Row Count 7 (+ 7) {\bf{ngModel}}, {\emph{string}}: Assignable angular expression to data-bind to. \newline % Row Count 9 (+ 2) {\bf{name}}(optional), {\emph{string}}: Property name of the form under which the control is published. \newline % Row Count 11 (+ 2) {\bf{min}}(optional), {\emph{string}}: Sets the min validation error key if the value entered is less than min. This must be a valid ISO datetime format (yyyy-MM-ddTHH:mm). \newline % Row Count 15 (+ 4) {\bf{max}}(optional), {\emph{string}}: Sets the max validation error key if the value entered is greater than max. This must be a valid ISO datetime format (yyyy-MM-ddTHH:mm). \newline % Row Count 19 (+ 4) {\bf{required}}(optional), {\emph{string}}: Sets required validation error key if the value is not entered. \newline % Row Count 21 (+ 2) {\bf{ngRequired}} (optional), {\emph{string}}: Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute. \newline % Row Count 26 (+ 5) {\bf{ngChange}}(optional), {\emph{string}}: Angular expression to be executed when input changes due to user interaction with the input element.% Row Count 29 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{{\emph{priority level 0}}} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{input{[}date{]}}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Input with date validation and transformation. In browsers that do not yet support the HTML5 date input, a text element will be used. In that case, text must be entered in a valid ISO-8601 date format (yyyy-MM-dd), for example: 2009-01-06. The model must always be a Date object. \newline % Row Count 6 (+ 6) {\bf{ngModel}}, {\emph{string}}: Assignable angular expression to data-bind to. \newline % Row Count 8 (+ 2) {\bf{name}}(optional), {\emph{string}}: Property name of the form under which the control is published. \newline % Row Count 10 (+ 2) {\bf{min}}(optional), {\emph{string}}: Sets the min validation error key if the value entered is less than min. This must be a valid ISO date string (yyyy-MM-dd). \newline % Row Count 14 (+ 4) {\bf{max}}(optional), {\emph{string}}: Sets the max validation error key if the value entered is greater than max. This must be a valid ISO date string (yyyy-MM-dd). \newline % Row Count 18 (+ 4) {\bf{required}}(optional), {\emph{string}}: Sets required validation error key if the value is not entered. \newline % Row Count 20 (+ 2) {\bf{ngRequired}}(optional), {\emph{string}}: Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute. \newline % Row Count 25 (+ 5) {\bf{ngChange}}(optional), {\emph{string}}: Angular expression to be executed when input changes due to user interaction with the input element.% Row Count 28 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{priority level 0} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{input{[}time{]}}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Input with time validation and transformation. In browsers that do not yet support the HTML5 date input, a text element will be used. In that case, the text must be entered in a valid ISO-8601 local time format (HH:mm:ss), for example: 14:57:00. Model must be a Date object. This binding will always output a Date object to the model of January 1, 1970, or local date new Date(1970, 0, 1, HH, mm, ss). \newline % Row Count 9 (+ 9) {\bf{ngModel}} - \{string\} - Assignable angular expression to data-bind to. \newline % Row Count 11 (+ 2) {\bf{name}} (optional) - \{string\} - Property name of the form under which the control is published. \newline % Row Count 13 (+ 2) {\bf{min}} (optional) - \{string\} - Sets the min validation error key if the value entered is less than min. This must be a valid ISO time format (HH:mm:ss). \newline % Row Count 17 (+ 4) {\bf{max}} (optional) - \{string\} - Sets the max validation error key if the value entered is greater than max. This must be a valid ISO time format (HH:mm:ss). \newline % Row Count 21 (+ 4) {\bf{required}} (optional) - \{string\} - Sets required validation error key if the value is not entered. \newline % Row Count 24 (+ 3) {\bf{ngRequired}} (optional) - \{string\} - Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute. \newline % Row Count 30 (+ 6) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{input{[}time{]} (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{ngChange}} (optional) - \{string\} - Angular expression to be executed when input changes due to user interaction with the input element.% Row Count 3 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{input{[}url{]}}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Text input with URL validation. Sets the url validation error key if the content is not a valid URL. \newline % Row Count 3 (+ 3) {\bf{ngModel}} - \{string\} - Assignable angular expression to data-bind to. \newline % Row Count 5 (+ 2) {\bf{name}} (optional) - \{string\} - Property name of the form under which the control is published. \newline % Row Count 7 (+ 2) {\bf{required}} (optional) - \{string\} - Sets required validation error key if the value is not entered. \newline % Row Count 10 (+ 3) {\bf{ngRequired}} (optional) - \{string\} - Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute. \newline % Row Count 16 (+ 6) {\bf{ngMinlength}} (optional) - \{number\} - Sets minlength validation error key if the value is shorter than minlength. \newline % Row Count 19 (+ 3) {\bf{ngMaxlength}} (optional) - \{number\} - Sets maxlength validation error key if the value is longer than maxlength. \newline % Row Count 22 (+ 3) {\bf{ngPattern}} (optional) - \{string\} - Sets pattern validation error key if the value does not match the RegExp pattern expression. Expected value is /regexp/ for inline patterns or regexp for patterns defined as scope expressions. \newline % Row Count 27 (+ 5) {\bf{ngChange}} (optional) - \{string\} - Angular expression to be executed when input changes due to user interaction with the input element.% Row Count 30 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{input{[}week{]}}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Input with week-of-the-year validation and transformation to Date. In browsers that do not yet support the HTML5 week input, a text element will be used. In that case, the text must be entered in a valid ISO-8601 week format (yyyy-W\#\#), for example: 2013-W02. The model must always be a Date object. \newline % Row Count 6 (+ 6) {\bf{ngModel}} - \{string\} - Assignable angular expression to data-bind to. \newline % Row Count 8 (+ 2) {\bf{name}} (optional) - \{string\} - Property name of the form under which the control is published. \newline % Row Count 10 (+ 2) {\bf{min}} (optional) - \{string\} - Sets the min validation error key if the value entered is less than min. This must be a valid ISO week format (yyyy-W\#\#). \newline % Row Count 14 (+ 4) {\bf{max}} (optional) - \{string\} - Sets the max validation error key if the value entered is greater than max. This must be a valid ISO week format (yyyy-W\#\#). \newline % Row Count 18 (+ 4) {\bf{required}} (optional) - \{string\} - Sets required validation error key if the value is not entered. \newline % Row Count 21 (+ 3) {\bf{ngRequired}} (optional) - \{string\} - Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute. \newline % Row Count 27 (+ 6) {\bf{ngChange}} (optional) - \{string\} - Angular expression to be executed when input changes due to user interaction with the input element.% Row Count 30 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{input{[}email{]}}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Text input with email validation. Sets the email validation error key if not a valid email address. \newline % Row Count 2 (+ 2) {\bf{ngModel}}, {\emph{string}}: Assignable angular expression to data-bind to. \newline % Row Count 4 (+ 2) {\bf{name}}(optional), {\emph{string}}: Property name of the form under which the control is published. \newline % Row Count 6 (+ 2) {\bf{required}}(optional), {\emph{string}}: Sets required validation error key if the value is not entered. \newline % Row Count 8 (+ 2) {\bf{ngRequired}}(optional), {\emph{string}}: Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute. \newline % Row Count 13 (+ 5) {\bf{ngMinlength}}(optional), {\emph{number}}: Sets minlength validation error key if the value is shorter than minlength. \newline % Row Count 16 (+ 3) {\bf{ngMaxlength}}(optional), {\emph{number}}: Sets maxlength validation error key if the value is longer than maxlength. \newline % Row Count 19 (+ 3) {\bf{ngPattern}}(optional), {\emph{string}}: Sets pattern validation error key if the value does not match the RegExp pattern expression. Expected value is /regexp/ for inline patterns or regexp for patterns defined as scope expressions. \newline % Row Count 24 (+ 5) {\bf{ngChange}}(optional), {\emph{string}}: Angular expression to be executed when input changes due to user interaction with the input element.% Row Count 27 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{priority level 0} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{input{[}month{]}}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Input with month validation and transformation. In browsers that do not yet support the HTML5 month input, a text element will be used. In that case, the text must be entered in a valid ISO-8601 month format (yyyy-MM), for example: 2009-01. The model must always be a Date object. \newline % Row Count 6 (+ 6) {\bf{ngModel}}, {\emph{string}}: Assignable angular expression to data-bind to. \newline % Row Count 8 (+ 2) {\bf{name}}(optional), {\emph{string}}: Property name of the form under which the control is published. \newline % Row Count 10 (+ 2) {\bf{min}}(optional), {\emph{string}}: Sets the min validation error key if the value entered is less than min. This must be a valid ISO month format (yyyy-MM). \newline % Row Count 14 (+ 4) {\bf{max}}(optional), {\emph{string}}: Sets the max validation error key if the value entered is greater than max. This must be a valid ISO month format (yyyy-MM). \newline % Row Count 18 (+ 4) {\bf{required}}(optional), {\emph{string}}: Sets required validation error key if the value is not entered. \newline % Row Count 20 (+ 2) {\bf{ngRequired}}(optional), {\emph{string}}: Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute. \newline % Row Count 25 (+ 5) {\bf{ngChange}}(optional), {\emph{string}}: Angular expression to be executed when input changes due to user interaction with the input element.% Row Count 28 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{priority level 0} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{input{[}number{]}}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Text input with number validation and transformation. Sets the number validation error if not a valid number. \newline % Row Count 3 (+ 3) {\bf{ngModel}}, {\emph{string}}: Assignable angular expression to data-bind to. \newline % Row Count 5 (+ 2) {\bf{name}}(optional), {\emph{string}}: Property name of the form under which the control is published. \newline % Row Count 7 (+ 2) {\bf{min}}(optional), {\emph{string}}: Sets the min validation error key if the value entered is less than min. \newline % Row Count 10 (+ 3) {\bf{max}}(optional), {\emph{string}}: Sets the max validation error key if the value entered is greater than max. \newline % Row Count 13 (+ 3) {\bf{required}}(optional), {\emph{string}}: Sets required validation error key if the value is not entered. \newline % Row Count 15 (+ 2) {\bf{ngRequired}}(optional), {\emph{string}}: Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute. \newline % Row Count 20 (+ 5) {\bf{ngMinlength}}(optional), {\emph{number}}: Sets minlength validation error key if the value is shorter than minlength. \newline % Row Count 23 (+ 3) {\bf{ngMaxlength}}(optional), {\emph{number}}: Sets maxlength validation error key if the value is longer than maxlength. \newline % Row Count 26 (+ 3) {\bf{ngPattern}}(optional), {\emph{string}}: Sets pattern validation error key if the value does not match the RegExp pattern expression. Expected value is /regexp/ for inline patterns or regexp for patterns defined as scope expressions. \newline % Row Count 31 (+ 5) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{input{[}number{]} (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{ngChange}}(optional), {\emph{string}}: Angular expression to be executed when input changes due to user interaction with the input element.% Row Count 3 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{input{[}text{]}}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Standard HTML text input with angular data binding, inherited by most of the input elements. \newline % Row Count 2 (+ 2) {\bf{ngModel}} - \{string\} - Assignable angular expression to data-bind to. \newline % Row Count 4 (+ 2) {\bf{name}} (optional) - \{string\} - Property name of the form under which the control is published. \newline % Row Count 6 (+ 2) {\bf{required}} (optional) - \{string\} - Adds required validation error key if the value is not entered. \newline % Row Count 9 (+ 3) {\bf{ngRequired}} (optional) - \{string\} - Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute. \newline % Row Count 15 (+ 6) {\bf{ngMinlength}} (optional) - \{number\} - Sets minlength validation error key if the value is shorter than minlength. \newline % Row Count 18 (+ 3) {\bf{ngMaxlength}} (optional) - \{number\} - Sets maxlength validation error key if the value is longer than maxlength. \newline % Row Count 21 (+ 3) {\bf{ngPattern}} (optional) - \{string\} - Sets pattern validation error key if the value does not match the RegExp pattern expression. Expected value is /regexp/ for inline patterns or regexp for patterns defined as scope expressions. \newline % Row Count 26 (+ 5) {\bf{ngChange}} (optional) - \{string\} - Angular expression to be executed when input changes due to user interaction with the input element. \newline % Row Count 29 (+ 3) {\bf{ngTrim}} (optional) - \{boolean\} - If set to false Angular will not automatically trim the input. This parameter is ignored for input{[}type=password{]} controls, which will never trim the input. (default: true)% Row Count 34 (+ 5) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{input{[}radio{]}}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{HTML radio button. \newline % Row Count 1 (+ 1) {\bf{ngModel}}, {\emph{string}}:Assignable angular expression to data-bind to. \newline % Row Count 3 (+ 2) {\bf{value}}, {\emph{string}}: The value to which the expression should be set when selected. \newline % Row Count 5 (+ 2) {\bf{name}}(optional), {\emph{string}}: Property name of the form under which the control is published. \newline % Row Count 7 (+ 2) {\bf{ngChange}}(optional), {\emph{string}}: Angular expression to be executed when input changes due to user interaction with the input element. \newline % Row Count 10 (+ 3) {\bf{ngValue}}, {\emph{string}}: Angular expression which sets the value to which the expression should be set when selected.% Row Count 13 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \SetRowColor{LightBackground} \mymulticolumn{1}{x{8.4cm}}{priority level 0.} \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngDblclick}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngDblclick directive allows you to specify custom behavior on a dblclick event. \newline % Row Count 2 (+ 2) Arguments: \newline % Row Count 3 (+ 1) {\bf{ngDblclick}} - \{expression\} - Expression to evaluate upon a dblclick. (The Event object is available as \$event)% Row Count 6 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngDisabled}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The HTML specification does not require browsers to preserve the values of boolean attributes such as disabled. (Their presence means true and their absence means false.) If we put an Angular interpolation expression into such an attribute then the binding information would be lost when the browser removes the attribute. The ngDisabled directive solves this problem for the disabled attribute. This complementary directive is not removed by the browser and so provides a permanent reliable place to store the binding information. \newline % Row Count 11 (+ 11) Arguments: \newline % Row Count 12 (+ 1) {\bf{ngDisabled}} - \{expression\} - If the expression is truthy, then special attribute "disabled" will be set on the element% Row Count 15 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngFocus}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Specify custom behavior on focus event. \newline % Row Count 1 (+ 1) Arguments: \newline % Row Count 2 (+ 1) {\bf{ngFocus}} - \{expression\} - Expression to evaluate upon focus. (Event object is available as \$event)% Row Count 5 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngForm}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Nestable alias of form directive. HTML does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined. \newline % Row Count 4 (+ 4) Arguments: \newline % Row Count 5 (+ 1) {\bf{ngForm | name}} (optional) - \{string\} - Name of the form. If specified, the form controller will be published into related scope, under this name.% Row Count 8 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngHide}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngHide directive shows or hides the given HTML element based on the expression provided to the ngHide attribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angular-csp.css to your html file (see ngCsp). \newline % Row Count 8 (+ 8) Arguments: \newline % Row Count 9 (+ 1) {\bf{ngHide}} - \{expression\} - If the expression is truthy then the element is shown or hidden respectively.% Row Count 12 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngHref}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Using Angular markup like \{\{hash\}\} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the \{\{hash\}\} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error. \newline % Row Count 6 (+ 6) Arguments: \newline % Row Count 7 (+ 1) {\bf{ngHref}} - \{template\} - any string which can contain \{\{\}\} markup.% Row Count 9 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngIf}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngIf directive removes or recreates a portion of the DOM tree based on an \{expression\}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM. \newline % Row Count 6 (+ 6) Arguments: \newline % Row Count 7 (+ 1) {\bf{ngIf}} - \{expression\} - If the expression is falsy then the element is removed from the DOM tree. If it is truthy a copy of the compiled element is added to the DOM tree.% Row Count 11 (+ 4) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngInclude}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Fetches, compiles and includes an external HTML fragment. \newline % Row Count 2 (+ 2) Arguments: \newline % Row Count 3 (+ 1) {\bf{ngInclude | src}} - \{string\} - angular expression evaluating to URL. If the source is a string constant, make sure you wrap it in single quotes, e.g. \seqsplit{src="'myPartialTemplate.html'".} \newline % Row Count 7 (+ 4) {\bf{onload}} (optional) - \{string\} - Expression to evaluate when a new partial is loaded. \newline % Row Count 9 (+ 2) {\bf{autoscroll}} (optional) - \{string\} - Whether ngInclude should call \$anchorScroll to scroll the viewport after the content is loaded. \newline % Row Count 12 (+ 3) - If the attribute is not set, disable scrolling. \newline % Row Count 14 (+ 2) - If the attribute is set without value, enable scrolling. \newline % Row Count 16 (+ 2) - Otherwise enable scrolling only if the expression evaluates to truthy value. \newline % Row Count 18 (+ 2) Events: \newline % Row Count 19 (+ 1) {\bf{\$includeContentRequested}} - Emitted every time the ngInclude content is requested. \newline % Row Count 21 (+ 2) Type: emit \newline % Row Count 22 (+ 1) Target: the scope ngInclude was declared in \newline % Row Count 23 (+ 1) {\bf{\$includeContentLoaded}} - Emitted every time the ngInclude content is reloaded. \newline % Row Count 25 (+ 2) Type: emit \newline % Row Count 26 (+ 1) Target: the current ngInclude scope \newline % Row Count 27 (+ 1) {\bf{\$includeContentError}} - Emitted when a template HTTP request yields an erronous response (status \textless{} 200 || status \textgreater{} 299) \newline % Row Count 30 (+ 3) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngInclude (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Type: emit \newline % Row Count 1 (+ 1) Target: the scope ngInclude was declared in% Row Count 2 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngInit}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngInit directive allows you to evaluate an expression in the current scope. \newline % Row Count 2 (+ 2) Arguments: \newline % Row Count 3 (+ 1) {\bf{ngInit}} - \{expression\} - Expression to eval.% Row Count 4 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngSrc}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Using Angular markup like \{\{hash\}\} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text \{\{hash\}\} until Angular replaces the expression inside \{\{hash\}\}. The ngSrc directive solves this problem. \newline % Row Count 5 (+ 5) Arguments: \newline % Row Count 6 (+ 1) {\bf{ngSrc}} - \{template\} - any string which can contain \{\{\}\} markup.% Row Count 8 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngSrcset}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Using Angular markup like \{\{hash\}\} in a srcset attribute doesn't work right: The browser will fetch from the URL with the literal text \{\{hash\}\} until Angular replaces the expression inside \{\{hash\}\}. The ngSrcset directive solves this problem. \newline % Row Count 5 (+ 5) Arguments: \newline % Row Count 6 (+ 1) {\bf{ngSrcset}} - \{template\} - any string which can contain \{\{\}\} markup.% Row Count 8 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngStyle}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngStyle directive allows you to set CSS style on an HTML element conditionally. \newline % Row Count 2 (+ 2) Arguments: \newline % Row Count 3 (+ 1) {\bf{ngStyle}} - \{expression\} - Expression which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys. \newline % Row Count 7 (+ 4) Since some CSS style names are not valid keys for an object, they must be quoted. See the 'background-color' style in the example below.% Row Count 10 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngSubmit}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Enables binding angular expressions to onsubmit events. \newline % Row Count 2 (+ 2) Arguments: \newline % Row Count 3 (+ 1) {\bf{ngSubmit}} - \{expression\} - Expression to eval. (Event object is available as \$event)% Row Count 5 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngSwitch}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{The ngSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression. Elements within ngSwitch but without ngSwitchWhen or ngSwitchDefault directives will be preserved at the location as specified in the template. \newline % Row Count 6 (+ 6) Arguments: \newline % Row Count 7 (+ 1) {\bf{ngSwitch | on}} - \{*\} - expression to match against ng-switch-when. On child elements add: \newline % Row Count 9 (+ 2) ngSwitchWhen: the case statement to match against. If match then this case will be displayed. If the same match appears multiple times, all the elements will be displayed. \newline % Row Count 13 (+ 4) ngSwitchDefault: the default case when no other case match. If there are multiple default cases, all of them will be displayed when no other case match.% Row Count 17 (+ 4) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngTransclude}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion. \newline % Row Count 3 (+ 3) Any existing content of the element that this directive is placed on will be removed before the transcluded content is inserted.% Row Count 6 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{ngValue}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Binds the given expression to the value of input{[}select{]} or input{[}radio{]}, so that when the element is selected, the ngModel of that element is set to the bound value. \newline % Row Count 4 (+ 4) Arguments: \newline % Row Count 5 (+ 1) {\bf{ngValue}} (optional) - \{string\} - angular expression, whose value will be bound to the value attribute of the input element% Row Count 8 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{script}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{Load the content of a \textless{}script\textgreater{} element into \$templateCache, so that the template can be used by ngInclude, ngView, or directives. The type of the \textless{}script\textgreater{} element must be specified as text/ng-template, and a cache name for the template must be assigned through the element's id, which can then be used as a directive's templateUrl. \newline % Row Count 7 (+ 7) Arguments: \newline % Row Count 8 (+ 1) {\bf{type}} - \{string\} - Must be set to 'text/ng-template'. \newline % Row Count 10 (+ 2) {\bf{id}} - \{string\} - Cache name of the template.% Row Count 11 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{select}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{HTML SELECT element with angular data-binding. \newline % Row Count 1 (+ 1) ngOptions: \newline % Row Count 2 (+ 1) The ngOptions attribute can be used to dynamically generate a list of \textless{}option\textgreater{} elements for the \textless{}select\textgreater{} element using the array or object obtained by evaluating the ngOptions \seqsplit{comprehension\_expression}. \newline % Row Count 7 (+ 5) Arguments: \newline % Row Count 8 (+ 1) {\bf{ngModel}} - \{string\} - Assignable angular expression to data-bind to. \newline % Row Count 10 (+ 2) {\bf{name}} (optional) - \{string\} - Property name of the form under which the control is published. \newline % Row Count 12 (+ 2) {\bf{required}}(optional) - \{string\} - The control is considered valid only if value is entered. \newline % Row Count 14 (+ 2) {\bf{ngRequired}}(optional) - \{string\} - Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute. \newline % Row Count 20 (+ 6) {\bf{ngOptions}}(optional) - \{comprehension\_expression\} - in one of the following forms: \newline % Row Count 22 (+ 2) for array data sources: \newline % Row Count 23 (+ 1) {\emph{label for value in array}} \newline % Row Count 24 (+ 1) {\emph{select as label for value in array}} \newline % Row Count 25 (+ 1) {\emph{label group by group for value in array}} \newline % Row Count 26 (+ 1) *select as label group by group for value in array track by trackexpr \newline % Row Count 28 (+ 2) for object data sources: \newline % Row Count 29 (+ 1) {\emph{label for (key , value) in object}} \newline % Row Count 30 (+ 1) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{select (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{ {\emph{select as label for (key , value) in object}} \newline % Row Count 2 (+ 2) {\emph{label group by group for (key, value) in object}} \newline % Row Count 4 (+ 2) {\emph{select as label group by group for (key, value) in object}} \newline % Row Count 6 (+ 2) Where: \newline % Row Count 7 (+ 1) {\emph{array / object}}: an expression which evaluates to an array / object to iterate over. \newline % Row Count 9 (+ 2) {\emph{value}}: local variable which will refer to each item in the array or each property value of object during iteration. \newline % Row Count 12 (+ 3) {\emph{key}}: local variable which will refer to a property name in object during iteration. \newline % Row Count 14 (+ 2) {\emph{label}}: The result of this expression will be the label for \textless{}option\textgreater{} element. The expression will most likely refer to the value variable (e.g. value.propertyName). \newline % Row Count 18 (+ 4) {\emph{select}}: The result of this expression will be bound to the model of the parent \textless{}select\textgreater{} element. If not specified, select expression will default to value. \newline % Row Count 22 (+ 4) {\emph{group}}: The result of this expression will be used to group options using the \textless{}optgroup\textgreater{} DOM element. \newline % Row Count 25 (+ 3) {\emph{trackexpr}}: Used when working with an array of objects. The result of this expression will be used to identify the objects in the array. The trackexpr will most likely refer to the value variable (e.g. value.propertyName).% Row Count 30 (+ 5) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{textarea}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{HTML textarea element control with angular data-binding. The data-binding and validation properties of this element are exactly the same as those of the input element. \newline % Row Count 4 (+ 4) Arguments: \newline % Row Count 5 (+ 1) {\bf{ngModel}} - \{string\} - Assignable angular expression to data-bind to. \newline % Row Count 7 (+ 2) {\bf{name}} (optional) - \{string\} - Property name of the form under which the control is published. \newline % Row Count 9 (+ 2) {\bf{required}}(optional) - \{string\} - Sets required validation error key if the value is not entered. \newline % Row Count 11 (+ 2) {\bf{ngRequired}}(optional) - \{string\} - Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute. \newline % Row Count 17 (+ 6) {\bf{ngMinlength}}(optional) - \{number\} - Sets minlength validation error key if the value is shorter than minlength. \newline % Row Count 20 (+ 3) {\bf{ngMaxlength}}(optional) - \{number\} - Sets maxlength validation error key if the value is longer than maxlength. \newline % Row Count 23 (+ 3) {\bf{ngPattern}} (optional) - \{string\} - Sets pattern validation error key if the value does not match the RegExp pattern expression. Expected value is /regexp/ for inline patterns or regexp for patterns defined as scope expressions. \newline % Row Count 28 (+ 5) {\bf{ngChange}} (optional) - \{string\} - Angular expression to be executed when input changes due to user interaction with the input element. \newline % Row Count 31 (+ 3) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{8.4cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{8.4cm}}{\bf\textcolor{white}{textarea (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{8.4cm}}{{\bf{ngTrim}} (optional) - \{boolean\} - If set to false Angular will not automatically trim the input. (default: true)% Row Count 3 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} % That's all folks \end{multicols*} \end{document}