Menu
<div ng-controller="CartController">
<div ng-repeat="item in items">
<span>{{item.title}}</span>
<input ng-model="item.quantity">
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
</div>
<div>Total: {{totalCart() | currency}}</div>
<div>Discount: {{bill.discount | currency}}</div>
<div>Subtotal: {{subtotal() | currency}}</div>
</div>
The | in the above code - what does it do?
654
The pipe symbol (|) is used for applying filters in AngularJS. A filter is a function that is invoked for handling model transformations.
Pipes are a useful feature in Angular. They are a simple way to transform values in an Angular template. There are some built in pipes, but you can also build your own pipes. A pipe takes in a value or values and then returns a value.
The pipe method of the Angular Observable is used to chain multiple operators together. We can use the pipe as a standalone method, which helps us to reuse it at multiple places or as an instance method. In this tutorial, we will take a look at the pipe and learn how to use it in an Angular Application.
AngularJS expressions can be written inside double braces: {{ expression }} . AngularJS expressions can also be written inside a directive: ng-bind="expression" . AngularJS will resolve the expression, and return the result exactly where the expression is written.
The pipe symbol (|) is used for applying filters in AngularJS. A filter is a function that is invoked for handling model transformations. Its basically just a global function that doesn't require registration of functions on a scope, and offers more convenient syntax to regular function calls. The currency filter automatically formats a number in the current currency locale of the user.
[Video content unfortunately now behind paywall] Check out this video for an example http://egghead.io/lessons/angularjs-built-in-filters
159
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
