AngularJS Custom Filter Usage Classic Instance Summary

The instance of this article describes the AngularJS custom filter usage. Share to everyone for your reference, specifically:

{{{with a filter data | Filter name: Parameter 1: Parameter 2: Parameters 3 …..}} App.Filter (‘Filter Name, Function () {Return Function (Removal Data, Parameters ….) {… Return Data is filtered;}
   Example 1: Whether 

      Name   Phone   
-> {{Friend.Name}} VAR App = Angular.Module ("MyApp", []); App.Controller ("MyAppCtrl", ["$ Scope", Function ($ Scope) {$ Scope.Friends = [{Name: ' John ', Phone:' 44555-1276 '}, {name:'Annie ', Phone:' 800-big-mary '}, {name:' mike ', phone:' 1155-4321 '}, {name:' adam ', phone:' 3355-5678 '}, {name:' David ', Phone:' 38755-8765 '}, {name:' mikay ', phone:' 555-5678 '}];}]); app.filter ("Myfilter", function () {Return Function (Input) {var output = []; angular.foreach (input, function (value, key) {console.log ("value ==" + json.stringify); console.log ("Value.Phone Type ==" + TYPEOF (Value.Phone)); console.log ("Value.Phone.indexOf ==" + value.phone.indexof ("555")); / * JS does not have a Contains method, use indexof to determine if the string is Contains the location of the * / / * indexof string, there is no -1 * / // method one: if (value.phone.indexof ("555")> = 0) {Output.push (value);} / / Method 2: // IF (value.phone.indexof ("555")! == -1) {// output.push (value); //}}; return output;}}; <!--
{{yenD.phone}}
Example 2: Reverse

Name: {{name}}

reverse: {{name | reverse}}
reverse and uppercase: {{name | reverse: true}}
 var myAppmodule = angular.Module ("MyAppModule ", []); MyAppModule.Controller (" MyAppCtrl ", [" $ scope ", function ($ scope) {$ scope.name =" xuqiang ";}]); myAppModule.Filter (" reverse ", function () {Return Function (Input, Uppercase) {  VAR OUT = ""; for (var i = 0; i }});       

Example 3: Replace
< input.length; i++) { out = input.charAt(i) + out; } if (uppercase) { out = out.toUpperCase(); } return out;

{{Welcome | ReplaceHello}} {{Welcome | Replacehello: 3: 5}}

VAR App = Angular.Module “myapp”, []); app.controller (“myAppctrl”, [“$ scope”, function ($ scope) {$ scope.welcome = “Hello AngularJS”;}]); // Custom Filter App. Filter (‘ReplaceHello’, Function () {Return Function (INPUT, N1, N2) {Console.log (“INPUT ==” + INPUT; console.log (“n1 ==” + n1); console.log “N2 ==” + N2); return input.replace (/ Hello /, ‘Hello’);}});
          


Custom filter body {font-size: 12px;} ul {list-style-type: none; width: 408px; margin: 0px; padding: 0px;} ul Li {float: Left; padding: 5px 0px;} ul .odd {color: # 0026ff;} ul .Even {color: # ff0000;} ul .bold {font-weight: bold;} ul Li span {Width: 52px; float: Left; Padding: 0px 10px;} ul .focus {background-color: #cccccc;}

Sequence number

Age
  Score     {$ INDEX + 1}}   {stu.name}}   {stu.sex}}   {{stu.age}}  
{stu.score}}
  • VAR A3_3 = Angular.Module ('A3_3', []); A3_3.Controller ('c3_3', ['$ Scope', Function ($ Scope) {$ Scope.bold = "bold";$ Scope.Data = [{Name: "Zhang Mingming", SEX: "Female", Age: 24, Score: 95}, {Name: "Li Qing Si", SEX: "Female", Age: 27, Score: 87}, {Name: "Liu Xiaohua", SEX: "Men", Age: 28, Score: 86}, {Name: "Mang Zhongzhong", SEX: "Men", Age: 23, Score: 97}];}]); A3_3 .filter ('Young', Function () {Return Function (E, TYPE) {var _out = []; var _sex = type? "male": "female"; for (var i = 0; i 22 && E Example 5: Sorting
  • Head Sorter body {font-size: 12px;} ul {list-style-type: None; width: 408px; margin: 0px; padding: 0px;} ul Li {float: left; padding: 5px 0px;} ul.bold {font-weight: bold;Cursor: Pointer;} UL Li span {width: 52px; float: Left; padding: 0px 10px;} ul .focus {background-color: #cccccc;}
Name < 28 && e[i].sex == _sex) _out.push(e[i]); } return _out; } }); Age
Score

{{$ INDEX + 1}}

{{stu.sex}}
 {{stu.age}}        VAR A3_4 = Angular.Module ('A3_4', []); A3_4.Controller ('C3_4', [' $ scope ', function ($ scope) {$ scope.bold = "bold"; $ scope.title =' name '; $ scope.desc = 0; $ scope.data = [{Name: "Zhang Mingming", SEX:" Female ", AGE: 24, Score: 95}, {Name:" Li Qing Si ", SEX:" Female ", Age: 27, Score: 87}, {Name:" Liu Xiaohua ", SEX:" Male ", Age: 28, Score: 86}, {Name:" Chen Zhongzhong ", SEX:" Men ", Age: 23, Score: 97}];}]     
  • character Find
  • body {font-size: 12px;} ul {list-style-type: none; width: 408px; margin: 0px; padding: 0px;} ul Li {float: Left; padding: 5px 0px;} ul.bold {font-weight: bold; cursor: Pointer;} ul li span {width: 52px; float: left; padding: 0px 10px;} ul .focus {background-color: # CCCCCC;}
  • Name Age
  • score
{$ INDEX + 1}} {stu.name}}
{{stu.sex}}
{{ Age}}

VAR A3_5 = Angular.Module (‘A3_5’, []); A3_5.Controller ‘c3_5’, [‘$ scope’, function ($ scope) {$ scope.bold = “bold”; $ scope.key = ”; $ scope.data = [{name: “Zhang Mingming”, SEX: “female “, AGE: 24, Score: 95}, {Name:” Li Qing Si “, SEX:” Female “, Age: 27, Score: 87}, {Name:” Liu Xiaohua “, SEX:” Men “, AGE: 28, Score: 86}, {Name: “Chen Zhongzhong”, SEX: “Men”, Age: 23, Score: 97}];}]
           [Angularjs actual combat]   MoreReaders who are interested in AngularJS can be viewed on this site: "AngularJS Directive Skill Summary", "AngularJS Getting Started and Advanced Tutorial" and "AngularJS MVC Architecture Summary" 
I hope this article will be described to everyone Angularjs Program design helps.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment