Home /AngularJs /AngularJS Filters

AngularJS Filters

Filters are used to change modify the data and can be clubbed in expression or directives using pipe character. Following is the list of commonly used filters.

1 uppercase converts a text to upper case text.
2 lowercase converts a text to lower case text.
3 currency formats text in a currency format.
4 filter filter the array to a subset of it based on provided criteria.
5 orderby orders the array based on provided criteria.
<pre class="prettyprint tryit prettyprinted"><span class="tag"><html></span>
<span class="tag"><head></span>
<span class="tag"><title></span><span class="pln">Angular JS Filters</span><span class="tag"></title></span>
<span class="tag"><script</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"</span><span class="tag">></script></span>
<span class="tag"></head></span>
<span class="tag"><body></span>
<span class="tag"><h2></span><span class="pln">AngularJS Sample Application</span><span class="tag"></h2></span>
<span class="tag"><div</span> <span class="atn">ng-app</span><span class="pun">=</span><span class="atv">"mainApp"</span> <span class="atn">ng-controller</span><span class="pun">=</span><span class="atv">"studentController"</span><span class="tag">></span>
<span class="tag"><table</span> <span class="atn">border</span><span class="pun">=</span><span class="atv">"0"</span><span class="tag">></span>
<span class="tag"><tr><td></span><span class="pln">Enter first name:</span><span class="tag"></td><td><input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span> <span class="atn">ng-model</span><span class="pun">=</span><span class="atv">"student.firstName"</span><span class="tag">></td></tr></span>
<span class="tag"><tr><td></span><span class="pln">Enter last name: </span><span class="tag"></td><td><input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span> <span class="atn">ng-model</span><span class="pun">=</span><span class="atv">"student.lastName"</span><span class="tag">></td></tr></span>
<span class="tag"><tr><td></span><span class="pln">Enter fees: </span><span class="tag"></td><td><input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span> <span class="atn">ng-model</span><span class="pun">=</span><span class="atv">"student.fees"</span><span class="tag">></td></tr></span>
<span class="tag"><tr><td></span><span class="pln">Enter subject: </span><span class="tag"></td><td><input</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span> <span class="atn">ng-model</span><span class="pun">=</span><span class="atv">"subjectName"</span><span class="tag">></td></tr></span>
<span class="tag"></table></span>
<span class="tag"></span>
<span class="tag"><table</span> <span class="atn">border</span><span class="pun">=</span><span class="atv">"0"</span><span class="tag">></span>
<span class="tag"><tr><td></span><span class="pln">Name in Upper Case: </span><span class="tag"></td><td></span><span class="pln">{{student.fullName() | uppercase}}</span><span class="tag"></td></tr></span>
<span class="tag"><tr><td></span><span class="pln">Name in Lower Case: </span><span class="tag"></td><td></span><span class="pln">{{student.fullName() | lowercase}}</span><span class="tag"></td></tr></span>
<span class="tag"><tr><td></span><span class="pln">fees: </span><span class="tag"></td><td></span><span class="pln">{{student.fees | currency}}</span><span class="tag"></td></tr></span>
<span class="tag"><tr><td></span><span class="pln">Subject:</span><span class="tag"></td><td></span>
<span class="tag"><ul></span>
   <span class="tag"><li</span> <span class="atn">ng-repeat</span><span class="pun">=</span><span class="atv">"subject in student.subjects | filter: subjectName |orderBy:'marks'"</span><span class="tag">></span><span class="pln">
      {{ subject.name + ', marks:' + subject.marks }}
   </span><span class="tag"></li></span>
<span class="tag"></ul></span>
<span class="tag"></td></tr></span>
<span class="tag"></table></span>
<span class="tag"></div></span>
<span class="tag"><script></span>
<span class="kwd">var</span><span class="pln"> mainApp </span><span class="pun">=</span><span class="pln"> angular</span><span class="pun">.</span><span class="pln">module</span><span class="pun">(</span><span class="str">"mainApp"</span><span class="pun">,</span> <span class="pun">[]);</span><span class="pln">

mainApp</span><span class="pun">.</span><span class="pln">controller</span><span class="pun">(</span><span class="str">'studentController'</span><span class="pun">,</span> <span class="kwd">function</span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">
   $scope</span><span class="pun">.</span><span class="pln">student </span><span class="pun">=</span> <span class="pun">{</span><span class="pln">
      firstName</span><span class="pun">:</span> <span class="str">"Mahesh"</span><span class="pun">,</span><span class="pln">
      lastName</span><span class="pun">:</span> <span class="str">"Parashar"</span><span class="pun">,</span><span class="pln">
      fees</span><span class="pun">:</span><span class="lit">500</span><span class="pun">,</span><span class="pln">
      subjects</span><span class="pun">:[</span>
         <span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="str">'Physics'</span><span class="pun">,</span><span class="pln">marks</span><span class="pun">:</span><span class="lit">70</span><span class="pun">},</span>
         <span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="str">'Chemistry'</span><span class="pun">,</span><span class="pln">marks</span><span class="pun">:</span><span class="lit">80</span><span class="pun">},</span>
         <span class="pun">{</span><span class="pln">name</span><span class="pun">:</span><span class="str">'Math'</span><span class="pun">,</span><span class="pln">marks</span><span class="pun">:</span><span class="lit">65</span><span class="pun">}</span>
      <span class="pun">],</span><span class="pln">
      fullName</span><span class="pun">:</span> <span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span>
         <span class="kwd">var</span><span class="pln"> studentObject</span><span class="pun">;</span><span class="pln">
         studentObject </span><span class="pun">=</span><span class="pln"> $scope</span><span class="pun">.</span><span class="pln">student</span><span class="pun">;</span>
         <span class="kwd">return</span><span class="pln"> studentObject</span><span class="pun">.</span><span class="pln">firstName </span><span class="pun">+</span> <span class="str">" "</span> <span class="pun">+</span><span class="pln"> studentObject</span><span class="pun">.</span><span class="pln">lastName</span><span class="pun">;</span>
      <span class="pun">}</span>
   <span class="pun">};</span>
<span class="pun">});</span>
<span class="tag"></script></span>
<span class="tag"></body></span>
<span class="tag"></html></span></pre>

Leave a Reply