Detailed Explanation and Example Code of AngularJS Custom Filter

　　　　 Another feature of AngularJS is that it provides filters that can operate on the data result in the UNIX pipeline style.

　　Using the pipeline, it is convenient for the display of the view in two-way data binding.

　　Filters change data into a new format during processing, and can use a pipeline style for chaining, as well as accept additional parameters.

　　Implementation Method

　　Let's see how to define and declare a filter, first we still need to create our own module myAppModule

　　　　　　　　　　　　　　　　　　 var myAppModule=angular.module("myApp",[]);

　　Next, create a filter based on the module:

myAppModule.filter("reverse",function(){
　　　　　　　　　　　
});

　　Among them, reverse is the name of the filter, followed by the method declaration of the filter, in which another method is returned:

myAppModule.filter("reverse",function(){
        return function(input,uppercase){
          var out = "";
          for(var i=0 ; i<input.length; i++{
            out = input.charAt(i)+out;
          }
          if(uppercase){
            out = out.toUpperCase();
          }
          return out;
        }
      });

　　The methods returned internally include two parameters, one of which is the input value, which is the value accepted by our filter.

　　If you want to implement the following filter:

　　name | reverse

　　Then input is the value represented by the name.

　　The following parameters are optional, and here we accept the uppercase bool value to determine whether to perform case conversion.

　　The internal implementation code is not necessary to explain. Just return the filtered string at the end.

　　Example Program

!doctype html
<html ng-app="myApp">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="myAppCtrl">
      name:{{ name }}<br>
      reverse name:{{ name | reverse }}<br>
      reverse&uppercase name:{{ name | reverse:true }}
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module("myApp",[]);
      myAppModule.controller("myAppCtrl",["$scope",function($scope){
        $scope.name = "xingoo";
      });
      myAppModule.filter("reverse",function(){
        return function(input,uppercase){
          var out = "";
          for(var i=0 ; i<input.length; i++{
            out = input.charAt(i)+out;
          }
          if(uppercase){
            out = out.toUpperCase();
          }
          return out;
        }
      });
    </script>
  </body>
</html>

　　Running Result

This is the material collection of AngularJS Custom Filters. We will continue to supplement relevant materials in the future, thank you all for your support to this site!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)

Basic Tutorial