AngularJS Filters, More Directives Directives so far ng-app: - - - PowerPoint PPT Presentation

AngularJS

Filters, More Directives

Directives so far …

• ng-app: - attach the application module to the

page.

• ng-controller: - attach a controller function to the

page.

• ng-show / ng-hide: - display a section based on an

Expression.

• ng-repeat: - repeat a section for each item in an

Array.

AngularJS also provides filters

• AngularJS filters can be used to transform data
• Filters format the values of expressions for display to

the user

• Filters are added to expressions and directives using

a pipe character

• Filters can be applied to expressions in view

templates using the following recipe: {{ data* | filter:options* }}

• Our first Filter is currency

{{12 | currency}} // à $12.00

AngularJS has a bunch of filters

• E.g. date filter

{{ 'some date' | date: 'MM/dd/yyyy @ h:mma' }}

• uppercase & lowercase filters on a string

{{ 'octagon gem' | uppercase }}

• limitTo filter that allows you to limit the number of

characters in a string to display {{ 'My Description' | limitTo:8}}

More filters …

• limitTo can also limit the number of items from an

array to display (e.g. the first 3 items) <li ng-repeat="product in products | limitTo:3">

• orderBy filter allows us to sort our products

(e.g., most expensive to least expensive) <li ng-repeat="product in products |

• rderBy:'-price'">

Back to AngularJS Directives

• Using ng-src in img tag.
• Using AngularJS markup like {{product.image}} in a

src attribute doesn't work right:

• The browser will fetch from the URL with the literal text {{product.image}}

until Angular replaces the expression inside {{hash}} <img src="{{product.image}}"/> // don’t do this

• The ng-src directive solves this problem

<img ng-src="{{product.image}}"/> // DO THIS

Chaining filters

• Filters can be applied to the result of other filters
• This is called chaining
• Here’s the recipe

{{ expression | filter1 | filter2 | ... }}

• Example

{{ ‘This is an expression’| uppercase| limitTo:14}}

Images with ng-repeat & ng-src

• Suppose product.images is an array of images in a

product object.

• Can display all the images using ng-repeat and

ng-src: <ul class="img-thumbnail clearfix"> <li ng-repeat=‘image in product.images’> <img ng-src="{{image}}" /> </li> </ul>

Resources

• https://angularjs.org
• http://www.w3schools.com/angular/angular_filters.asp
• https://www.codeschool.com/paths/javascript