Filters are simple methods that modify the output of numbers, strings, variables and objects. They are placed within an output tag {{ }} and are denoted by a pipe character.|

Usage

In HTML Template Binding

{{ filter_expression | filter : expression : comparator : anyPropertyKey}}

In JavaScript

$filter('filter')(array, expression, comparator, anyPropertyKey)

Example

Input

<!-- product.title = "Awesome Shoes" -->
{{ product.title | uppercase }}

Output

AWESOME SHOES

In the example above, product is the object, title is its attribute, and uppercase is the filter being applied.

Some filters require a parameter to be passed.

Input

{{ product.title | remove: "Awesome" }}

Output

Shoes

Multiple filters can be used on one output. They are applied from left to right.

Input

<!-- product.title = "Awesome Shoes" -->
{{ product.title | uppercase | remove: "AWESOME"  }}

Output

SHOES

Built-In AngularJs Filters

Filters 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.

The underlying API is the $filterProvider.

• date
• filter
• json
• limitTo
• lowercase
• number
• orderBy
• uppercase

StoreHippo Filters

• URL Filters
  • asset
  • global_asset
  • image
• String Filters
  • ms_ucfirst
  • remove_underscore
  • truncate
• Array Filters
  • chunk
• Additional Filters
  • msCurrency
  • msTranslate

URL Filters

URL filters output links to assets on StoreHippo Content Delivery Network (CDN). They are also used to create links for images.

asset

Returns the URL of a file in the "assets" folder of a theme.

Input

{{ 'store.js' | asset }}

Output

"//cdn.storehippo.com/s/573db3149f0d58741f0cc63b/ms.local_themes/575fb4467886ea8b1e0bae26/store.js?_v=ms1501_1490177739715"

global_asset

Returns the URL of a global asset. Global assets are kept in a directory on StoreHippo servers. Input

{{ 'custom.css' | global_asset }}

Output

"https://cdn.storehippo.com/global/assets/custom.css" 

image

Returns the URL of an image. Accepts image size parameter. You can use  image filter on the image or src attributes of the object types. The image filter should be followed by the image size that you want to use. If you request a size smaller than your original image's dimensions, StoreHippo will scale the image for you.

If you don't include an image size, the filter returns a  (1024x1024) image.

Input

{{ product.image | image: '240x240' }}
{{ variant.image | image: '640x640' }}
{{ record.image | image: '1024x1024' }}
{{ product.image | image }}

Output

http://cdn.storehippo.com/s/55f01e8806ed25a71f1d28fd/ms.products/58d788cc969dbca336281d5e/images/58d788cc969dbca336281d5f/58d788ccd0ed51d744043d64/webp/58d788ccd0ed51d744043d64-240x240.jpeg

http://cdn.storehippo.com/s/55f01e8806ed25a71f1d28fd/ms.products/58d788cc969dbca336281d5e/images/58d788cc969dbca336281d5f/58d788ccd0ed51d744043d64/webp/58d788ccd0ed51d744043d64-640x640.jpeg

http://cdn.storehippo.com/s/55f01e8806ed25a71f1d28fd/ms.products/58d788cc969dbca336281d5e/images/58d788cc969dbca336281d5f/58d788ccd0ed51d744043d64/webp/58d788ccd0ed51d744043d64-1024x1024.jpeg

http://cdn.storehippo.com/s/55f01e8806ed25a71f1d28fd/ms.products/58d788cc969dbca336281d5e/images/58d788cc969dbca336281d5f/58d788ccd0ed51d744043d64/webp/58d788ccd0ed51d744043d64.jpeg

If original image is required than 'originals' filter must use:

Input

{{ product.image | image: 'orginals'}}

Output

http://cdn.storehippo.com/s/55f01e8806ed25a71f1d28fd/originals/ms.products/58d788cc969dbca336281d5e/images/58d788cc969dbca336281d5f/58d788ccd0ed51d744043d64/webp/58d788ccd0ed51d744043d64.jpeg

Size parameters of image filter

50x50 (output : cropped image)
60x60
100x100  (output : cropped image)
120x120
240x240
640x640
1024x1024
2048x2048 (available only for slider images)

 

String filters

String filters are used to manipulate outputs and variables of the string type.

ms_ucfirst

Capitalizes the first word in a string

Input

{{ 'capitalize me' | ms_ucfirst }}

Output

Capitalize me

remove_underscore

Remove the underscore in a string

Input

{{ 'edit_me' | ms_ucfirst }}

Output

edit me

truncate

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.

Input

{{ "The cat came back the very next day" | truncate: 13 }}

Output

The cat ca...

Array Filters

Array filters change the output of arrays.

chunk

Returns the subset of the items in an array.

Input

var my_array = ['apples', 'oranges', 'peaches', 'plums']

{{ my_array | chunk:'2' }}

Output

['plums', 'peaches']

Additional filters

General filters serve many different purposes including formatting, converting, and applying translations.

msCurrency

msCurrency filters format prices based on the Currency Settings found in General Settings.

Input

{{ 145 | msCurrency }}

Output

$145  

msTranslate

msTranslate filters translates text or phrases on the basis of language enabled

Input

{{ 'service instantly translates words, phrases, and web pages between English and over 100 other languages' | msTranslate }}

Output

सेवा अंग्रेजी, और 100 से अधिक अन्य भाषाओं के बीच शब्दों, वाक्यांशों और वेब पृष्ठों का त्वरित रूप से अनुवाद करती है

Creating custom filters

Writing your own filter is very easy: just register a new filter factory function with your module. Internally, this uses the filterProvider. This factory function should return a new filter function which takes the input value as the first argument. Any filter arguments are passed in as additional arguments to the filter function. Details of creating custom filters