Usage\n
{{ filter_expression | filter : expression : comparator : anyPropertyKey}}\n\n\n
$filter('filter')(array, expression, comparator, anyPropertyKey)
\n\nInput
\n\n<!-- product.title = \"Awesome Shoes\" -->\n{{ product.title |
uppercase
}}
Output
\nAWESOME SHOES
\nIn the example above, product
is the object, title
is its attribute, uppercase
Some filters require a parameter to be passed.
Input
\n{{ product.title | remove: \"Awesome\" }}
\nOutput
\nShoes
\n
Multiple filters can be used on one output. They are applied from left to right.
Input
\n<!-- product.title = \"Awesome Shoes\" -->\n{{ product.title | uppercase | remove: \"AWESOME\" }}
\nOutput
\nSHOES
\nFilters format the value of an expression for display to the user. They can be used in view templates, controllers or services. AngularJS comes with a collection of built-in filters, but it is easy to define your own as well.
\nThe underlying API is $filterProvider
URL filters output links to assets on StoreHippo Content Delivery Network (CDN). They are also used to create links for images.
\nReturns the URL of a file in the \"assets\" folder of a theme.
\nInput
\n{{ 'store.js' | asset }}
\nOutput
\n\"//cdn.storehippo.com/s/573db3149f0d58741f0cc63b/ms.local_themes/575fb4467886ea8b1e0bae26/store.js?_v=ms1501_1490177739715\"\n
\n\nReturns the URL of a global asset. Global assets are kept in a directory on StoreHippo servers. Input
\n{{ 'custom.css' | global_asset }}
\nOutput
\n\"https://cdn.storehippo.com/global/assets/custom.css\"
\n
Returns the URL of an image. Accepts image size parameter. You can image filter
image
src
image
If you don't include
Input
\n{{ product.image | image: '240x240' }}\n{{ variant.image | image: '640x640' }}\n{{ record.image | image: '1024x1024' }}\n{{ product.image | image }}\n
\nOutput
\nhttp://cdn.storehippo.com/s/55f01e8806ed25a71f1d28fd/ms.products/58d788cc969dbca336281d5e/images/58d788cc969dbca336281d5f/58d788ccd0ed51d744043d64/webp/58d788ccd0ed51d744043d64-240x240.jpeg
\nhttp://cdn.storehippo.com/s/55f01e8806ed25a71f1d28fd/ms.products/58d788cc969dbca336281d5e/images/58d788cc969dbca336281d5f/58d788ccd0ed51d744043d64/webp/58d788ccd0ed51d744043d64-640x640.jpeg
\nhttp://cdn.storehippo.com/s/55f01e8806ed25a71f1d28fd/ms.products/58d788cc969dbca336281d5e/images/58d788cc969dbca336281d5f/58d788ccd0ed51d744043d64/webp/58d788ccd0ed51d744043d64-1024x1024.jpeg
\nhttp://cdn.storehippo.com/s/55f01e8806ed25a71f1d28fd/ms.products/58d788cc969dbca336281d5e/images/58d788cc969dbca336281d5f/58d788ccd0ed51d744043d64/webp/58d788ccd0ed51d744043d64.jpeg
\nInput
\n{{ product.image | image: 'orginals'}}
\nOutput
\nhttp://cdn.storehippo.com/s/55f01e8806ed25a71f1d28fd/originals/ms.products/58d788cc969dbca336281d5e/images/58d788cc969dbca336281d5f/58d788ccd0ed51d744043d64/webp/58d788ccd0ed51d744043d64.jpeg
\n50x50 (output : cropped image)
60x60
100x100 (output : cropped image)
120x120
240x240
640x640
1024x1024
2048x2048 (available only for slider images)
String filters are used to manipulate outputs and variables of the string type.
\nCapitalizes the first word in a string
\nInput
\n\n{{ 'capitalize me' |
ms_ucfirst}}
Output
\nCapitalize me
\nRemove the underscore in a string
\nInput
\n\n{{ 'edit_me' |
ms_ucfirst}}
Output
\nedit me
\n
Truncates a string down to the number of characters passed as the first parameter. An ellipsis (...) is appended to the truncated string and is included in the character count.
\nInput
\n{{ \"The cat came back the very next day\" | truncate: 13 }}\n
\nOutput
\nThe cat ca...
\n
\nArray filters change the output of arrays.
\n\nReturns the subset of the items in an array.
Input
var my_array = ['apples', 'oranges', 'peaches', 'plums']\n\n{{ my_array | chunk:'2' }}\n
\nOutput
\n['plums', 'peaches']
\n\n\nGeneral filters serve many different purposes including formatting, converting, and applying translations.
\nmsCurrency filters format prices based on the Currency Settings found in General Settings.
\nInput
\n{{ 145 | msCurrency }}
\nOutput
\n$145 \n
\nInput
\n{{ 'service instantly translates words, phrases, and web pages between English and over 100 other languages' | msTranslate }}
\nOutput
\nसेवा अंग्रेजी, और 100 से अधिक अन्य भाषाओं के बीच शब्दों, वाक्यांशों और वेब पृष्ठों का त्वरित रूप से अनुवाद करती है\n\n
Writing your own filter is very easy: just register a new filter factory function with your module. Internally, this uses filterProvider