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 | orderBy:'-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}} o 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 •