\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-v1-3-0-filters.pdf) /Creator (Cheatography) /Author (Roman K. (Roman)) /Subject (Angular Js v1.3.0 Filters 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}{A38D6C} \definecolor{LightBackground}{HTML}{F9F7F5} \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 v1.3.0 Filters Cheat Sheet}}}} \\ \normalsize{by \textcolor{DarkBackground}{Roman K. (Roman)} via \textcolor{DarkBackground}{\uline{cheatography.com/19465/cs/2483/}}} \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}Not Yet Published.\\ 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*}{3} \begin{tabularx}{5.377cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{currency11}} \tn \SetRowColor{white} \mymulticolumn{1}{x{5.377cm}}{HTML: \newline % Row Count 1 (+ 1) `\{\{ currency\_expression | currency : symbol\}\}` \newline % Row Count 2 (+ 1) JS: \newline % Row Count 3 (+ 1) \seqsplit{`\$filter('currency')(amount}, symbol)` \newline % Row Count 4 (+ 1) Params: \newline % Row Count 5 (+ 1) {\bf{amount}}, {\emph{number}}: Input to filter. \newline % Row Count 6 (+ 1) {\bf{symbol}} (optional), {\emph{string}}: Currency symbol or identifier to be displayed.% Row Count 8 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{number11}} \tn \SetRowColor{white} \mymulticolumn{1}{x{5.377cm}}{Formats a number as text. \newline % Row Count 1 (+ 1) In HTML Template Binding: \newline % Row Count 2 (+ 1) `\{\{ number\_expression | number : fractionSize\}\}` \newline % Row Count 3 (+ 1) In JavaScript: \newline % Row Count 4 (+ 1) \seqsplit{`\$filter('number')(number}, fractionSize)` \newline % Row Count 5 (+ 1) Arguments: \newline % Row Count 6 (+ 1) {\bf{number}}, {\emph{number | string}}: Number to format. \newline % Row Count 7 (+ 1) {\bf{fractionSize}} (optional), {\emph{number | string}}: Number of decimal places to round the number to. If this is not provided then the fraction size is computed from the current locale's number formatting pattern. In the case of the default locale, it will be 3. \newline % Row Count 13 (+ 6) Returns: \newline % Row Count 14 (+ 1) {\emph{string}}, Number rounded to decimalPlaces and places a "," after each third digit.% Row Count 16 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{date11}} \tn \SetRowColor{white} \mymulticolumn{1}{x{5.377cm}}{Formats date to a string based on the requested format. \newline % Row Count 2 (+ 2) HTML: \newline % Row Count 3 (+ 1) `\{\{ date\_expression | date : format\}\}` \newline % Row Count 4 (+ 1) JS: \newline % Row Count 5 (+ 1) `\$filter('date')(date, format)` \newline % Row Count 6 (+ 1) Arguments: \newline % Row Count 7 (+ 1) {\bf{date}}, {\emph{Date | number |string}}: Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone. \newline % Row Count 15 (+ 8) {\bf{format}} (optional), {\emph{string}}: Formatting rules (see Description). If not specified, mediumDate is used. \newline % Row Count 18 (+ 3) Return: \newline % Row Count 19 (+ 1) {\emph{string}}, Formatted string or the input if input is not recognized as date/millis.% Row Count 21 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{json11}} \tn \SetRowColor{white} \mymulticolumn{1}{x{5.377cm}}{Allows you to convert a JavaScript object into JSON string. \newline % Row Count 2 (+ 2) In HTML Template Binding: \newline % Row Count 3 (+ 1) `\{\{ json\_expression | json\}\}` \newline % Row Count 4 (+ 1) In JavaScript: \newline % Row Count 5 (+ 1) \seqsplit{`\$filter('json')(object)`} \newline % Row Count 6 (+ 1) Arguments: \newline % Row Count 7 (+ 1) {\bf{object}}, {\emph{*}}: Any JavaScript object (including arrays and primitive types) to filter.% Row Count 9 (+ 2) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{lowercase11}} \tn \SetRowColor{white} \mymulticolumn{1}{x{5.377cm}}{Converts string to lowercase. \newline % Row Count 1 (+ 1) In HTML Template Binding \newline % Row Count 2 (+ 1) `\{\{ lowercase\_expression | lowercase\}\}` \newline % Row Count 3 (+ 1) In JavaScript \newline % Row Count 4 (+ 1) `\$filter('lowercase')()`% Row Count 5 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{uppercase11}} \tn \SetRowColor{white} \mymulticolumn{1}{x{5.377cm}}{Converts string to uppercase. \newline % Row Count 1 (+ 1) In HTML Template Binding \newline % Row Count 2 (+ 1) `\{\{ uppercase\_expression | uppercase\}\}` \newline % Row Count 3 (+ 1) In JavaScript \newline % Row Count 4 (+ 1) `\$filter('uppercase')()`% Row Count 5 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{filter11}} \tn \SetRowColor{white} \mymulticolumn{1}{x{5.377cm}}{Selects a subset of items from array and returns it as a new array. \newline % Row Count 2 (+ 2) HTML: \newline % Row Count 3 (+ 1) `\{\{ filter\_expression | filter : expression : comparator\}\}` \newline % Row Count 5 (+ 2) JS: \newline % Row Count 6 (+ 1) \seqsplit{`\$filter('filter')(array}, expression, comparator)` \newline % Row Count 8 (+ 2) Arguments: \newline % Row Count 9 (+ 1) {\bf{array}}, {\emph{Array}}: The source array. \newline % Row Count 10 (+ 1) {\bf{expression}}, {\emph{string | Object | function()}}: The predicate to be used for selecting items from array. \newline % Row Count 13 (+ 3) Can be one of: \newline % Row Count 14 (+ 1) {\emph{string}}: The string is evaluated as an expression and the resulting value is used for substring match against the contents of the array. All strings or objects with string properties in array that contain this string will be returned. The predicate can be negated by prefixing the string with !. \newline % Row Count 21 (+ 7) {\emph{Object}}: A pattern object can be used to filter specific properties on objects contained by array. For example \{name:"M", phone:"1"\} predicate will return an array of items which have property name containing "M" and property phone containing "1". A special property name \$ can be used (as in \{\$:"text"\}) to accept a match against any property of the object. That's equivalent to the simple substring match with a string as described above. \newline % Row Count 30 (+ 9) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{5.377cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{filter11 (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{5.377cm}}{ {\emph{function(value)}}: A predicate function can be used to write arbitrary filters. The function is called for each element of array. The final result is an array of those elements that the predicate returned true for. \newline % Row Count 5 (+ 5) {\bf{comparator}}, {\emph{function(actual, expected) | true | undefined}}: Comparator which is used in determining if the expected value (from the filter expression) and actual value (from the object in the array) should be considered a match. \newline % Row Count 10 (+ 5) Can be one of: \newline % Row Count 11 (+ 1) {\emph{function(actual, expected)}}: The function will be given the object value and the predicate value to compare and should return true if the item should be included in filtered result. \newline % Row Count 15 (+ 4) {\emph{true}}: A shorthand for function(actual, expected) \{ return angular.equals(expected, actual)\}. this is essentially strict comparison of expected and actual. \newline % Row Count 19 (+ 4) {\emph{false|undefined}}: A short hand for a function which will look for a substring match in case insensitive way.% Row Count 22 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{orderBy11}} \tn \SetRowColor{white} \mymulticolumn{1}{x{5.377cm}}{Orders a specified array by the expression predicate. It is ordered alphabetically for strings and numerically for numbers. Note: if you notice numbers are not being sorted correctly, make sure they are actually being saved as numbers and not strings. \newline % Row Count 6 (+ 6) In HTML Template Binding: \newline % Row Count 7 (+ 1) `\{\{ orderBy\_expression | orderBy : expression : reverse\}\}` \newline % Row Count 9 (+ 2) In JavaScript: \newline % Row Count 10 (+ 1) \seqsplit{`\$filter('orderBy')(array}, expression, reverse)` \newline % Row Count 11 (+ 1) Arguments: \newline % Row Count 12 (+ 1) {\bf{array}}, {\emph{Array}}: The array to sort. \newline % Row Count 13 (+ 1) {\bf{expression}} {\emph{function(*) | string | Array.(function(*)|string)\textgreater{} }}: A predicate to be used by the comparator to determine the order of elements. \newline % Row Count 16 (+ 3) Can be one of: \newline % Row Count 17 (+ 1) {\emph{function}}: Getter function. The result of this function will be sorted using the \textless{}, =, \textgreater{} operator. \newline % Row Count 20 (+ 3) {\emph{string}}: An Angular expression. The result of this expression is used to compare elements (for example name to sort by a property called name or name.substr(0, 3) to sort by 3 first characters of a property called name). The result of a constant expression is interpreted as a property name to be used in comparisons (for example "special name" to sort object by the value of their special name property). An expression can be optionally prefixed with + or - to control ascending or descending sort order (for example, +name or -name). \newline % Row Count 31 (+ 11) } \tn \end{tabularx} \par\addvspace{1.3em} \vfill \columnbreak \begin{tabularx}{5.377cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{orderBy11 (cont)}} \tn \SetRowColor{white} \mymulticolumn{1}{x{5.377cm}}{ {\emph{Array}}: An array of function or string predicates. The first predicate in the array is used for sorting, but when two items are equivalent, the next predicate is used. \newline % Row Count 4 (+ 4) {\bf{reverse}}(optional), {\emph{boolean}}: Reverse the order of the array. \newline % Row Count 6 (+ 2) Returns \newline % Row Count 7 (+ 1) {\emph{Array}}: Sorted copy of the source array.% Row Count 8 (+ 1) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} \begin{tabularx}{5.377cm}{X} \SetRowColor{DarkBackground} \mymulticolumn{1}{x{5.377cm}}{\bf\textcolor{white}{limitTo32}} \tn \SetRowColor{white} \mymulticolumn{1}{x{5.377cm}}{Creates a new array or string containing only a specified number of elements. The elements are taken from either the beginning or the end of the source array or string, as specified by the value and sign (positive or negative) of limit. \newline % Row Count 5 (+ 5) In HTML Template Binding: \newline % Row Count 6 (+ 1) \{\{ limitTo\_expression | limitTo : limit\}\} \newline % Row Count 7 (+ 1) In JavaScript: \newline % Row Count 8 (+ 1) \seqsplit{\$filter('limitTo')(input}, limit) \newline % Row Count 9 (+ 1) Arguments: \newline % Row Count 10 (+ 1) {\bf{input}} {\emph{Array | string}}: Source array or string to be limited. \newline % Row Count 12 (+ 2) {\bf{limit}} {\emph{string | number}}: The length of the returned array or string. If the limit number is positive, limit number of items from the beginning of the source array/string are copied. If the number is negative, limit number of items from the end of the source array/string are copied. The limit will be trimmed if it exceeds array.length \newline % Row Count 19 (+ 7) Returns \newline % Row Count 20 (+ 1) {\emph{Array | string}}: A new sub-array or substring of length limit or less if input array had less than limit elements.% Row Count 23 (+ 3) } \tn \hhline{>{\arrayrulecolor{DarkBackground}}-} \end{tabularx} \par\addvspace{1.3em} % That's all folks \end{multicols*} \end{document}