AngularJS Filters: Making Your Data Shin - FadiZahhar/AngularJs GitHub Wiki

The Task Manager is looking good, but Lina (the designer) wants the lists to look more professional. She asks:

Lina: “Can we show dates in a friendly way, make text uppercase, and maybe filter lists as users type? All without writing a bunch of new code?”

Sara (smiling): “I just read about AngularJS filters! They let us format and transform data right in the HTML—like giving our output a makeover.”

• Filters format the value of an expression for display to the user.
• They’re applied using the pipe symbol | in your expressions.
• Built-in filters include uppercase, lowercase, currency, date, filter (for searching), and orderBy (for sorting).

Example: Show user names in all caps:

<div ng-app ng-init="name='Lina'">
  <p>Normal: {{ name }}</p>
  <p>Uppercase: {{ name | uppercase }}</p>
  <p>Lowercase: {{ name | lowercase }}</p>
</div>

Result:

• “Normal: Lina”
• “Uppercase: LINA”
• “Lowercase: lina”

Example: Format numbers and money:

<div ng-app ng-init="price=99.95">
  <p>Original: {{ price }}</p>
  <p>Currency: {{ price | currency }}</p>
  <p>With two decimals: {{ price | number:2 }}</p>
</div>

Result:

• “Currency: $99.95” (default USD, or your locale)
• “With two decimals: 99.95”

Mike: “Let’s show today’s date in different ways!”

<div ng-app ng-init="today=1398250543000">
  <p>Default: {{ today | date }}</p>
  <p>Short: {{ today | date:'short' }}</p>
  <p>Full date: {{ today | date:'fullDate' }}</p>
</div>

You can use new Date().getTime() to get the current time in milliseconds.

Lina wants users to search tasks as they type:

<div ng-app ng-init="tasks=['Design','Develop','Deploy','Test','Launch']">
  <input ng-model="search">
  <ul>
    <li ng-repeat="t in tasks | filter:search">{{ t }}</li>
  </ul>
</div>

Result: Type “De” and see only “Design” and “Develop” show up instantly.

Sara: “Let’s sort tasks alphabetically!”

<div ng-app ng-init="tasks=['Design','Develop','Deploy','Test','Launch']">
  <ul>
    <li ng-repeat="t in tasks | orderBy:'toString()'">{{ t }}</li>
  </ul>
</div>

You can sort objects by a property name:

<div ng-app ng-init="people=[
  {name:'Sara', age:28},
  {name:'Mike', age:32},
  {name:'Lina', age:26}
]">
  <ul>
    <li ng-repeat="p in people | orderBy:'age'">{{ p.name }} ({{ p.age }})</li>
  </ul>
</div>

Mike: “You can chain filters too. For example, sort tasks and show only those matching search:”

<input ng-model="search">
<ul>
  <li ng-repeat="t in tasks | filter:search | orderBy:'toString()'">{{ t }}</li>
</ul>

Sara: “We can even write our own filters, but the built-in ones handle most needs!”

• Filters are used with | to instantly format or transform data for display.
• You can filter and sort lists, format numbers, currency, and dates—all in the template.
• Filters keep your HTML clean and your logic focused in controllers.

Can you show a list of products with prices in currency, and allow users to search and sort them by name?

Sample Solution:

<div ng-app ng-init="products=[
  {name:'Laptop', price:999.95},
  {name:'Phone', price:599.50},
  {name:'Tablet', price:399.99}
]">
  <input ng-model="search">
  <ul>
    <li ng-repeat="p in products | filter:search | orderBy:'name'">
      {{ p.name | uppercase }}: {{ p.price | currency }}
    </li>
  </ul>
</div>

Lina: “Now I can make lists searchable and beautiful, just by using filters!”

Mike: “Let’s dive into custom filters and see how we can extend AngularJS even more next.”

Try all these examples live in the [W3Schools AngularJS TryIt Editor](https://www.w3schools.com/angular/angular_tryit.asp?filename=tryangular_filters).