How to use AngularJS custom filter usage

This time I will show you how to use AngularJS custom filter usage, and what are the precautions for using AngularJS custom filter usage. The following is a practical case, let's take a look.

Filter structure

{{带过滤数据 | 过滤器名：参数1：参数2：参数3.....}}
app.filter('过滤器名', function () {
    return function (待过滤数据, 参数....) {
           ......
      return 已过滤数据;
 }

Example 1: Whether to include

nbsp;html>


  <meta>
  <script></script>


<p>
  </p><p>
    </p>

                                                                                  

Name	Phone
{{friend.name}}	{{friend.phone}}

   <script> var app = angular.module("myApp", []); app.controller("myAppCtrl", ["$scope", function ($scope) { $scope.friends = [{name: &#39;John&#39;, phone: &#39;44555-1276&#39;}, {name: &#39;Annie&#39;, phone: &#39;800-BIG-MARY&#39;}, {name: &#39;Mike&#39;, phone: &#39;11555-4321&#39;}, {name: &#39;Adam&#39;, phone: &#39;33555-5678&#39;}, {name: &#39;David&#39;, phone: &#39;387555-8765&#39;}, {name: &#39;Mikay&#39;, phone: &#39;555-5678&#39;}]; }]); app.filter("myfilter", function () { return function (input) { var output = []; angular.forEach(input, function (value, key) { console.log("value==" + JSON.stringify(value)); console.log("value.phone类型==" + typeof (value.phone)); console.log("value.phone.indexOf==" + value.phone.indexOf("555")); /*js中没有contains方法，使用indexOf来判断字符串是否包含*/ /*indexOf字符串出现的位置，没有则返回-1*/ //方法一： if (value.phone.indexOf("555") >= 0) { output.push(value); } //方法二： // if (value.phone.indexOf("555") !== -1) { // output.push(value); // } }); return output; } }); </script>

Example 2: Reverse order

nbsp;html>


  <meta>
  <script></script>


<p>
  姓名:{{ name }}<br>
  倒序:{{ name | reverse }}<br>
  倒序并大写:{{ name | reverse:true }}
</p>
<script>
  var myAppModule = angular.module("myApp", []);
  myAppModule.controller("myAppCtrl", ["$scope", function ($scope) {
    $scope.name = "xuqiang";
  }]);
  myAppModule.filter("reverse", function () {
    return function (input, uppercase) {
      <!--input就是其中name代表的值。-->
      <!--uppercase这个bool值，判断是否要进行大小写转换。-->
      var out = "";
      for (var i = 0; i < input.length; i++) {
        out = input.charAt(i) + out;
      }
      if (uppercase) {
        out = out.toUpperCase();
      }
      return out;
      <!--返回过滤后的字符串-->
    }
  });
</script>

Example 3: Replace

nbsp;html>


  <meta>
  <script></script>


<p>
  </p><p>
    {{welcome | replaceHello}}<br>
    {{welcome | replaceHello:3:5}}<br>
  </p>

<script>
  var app = angular.module("myApp", []);
  app.controller("myAppCtrl", ["$scope", function ($scope) {
    $scope.welcome = "Hello AngularJs";
  }]);
  //自定义过滤器
  app.filter(&#39;replaceHello&#39;, function () {
    return function (input, n1, n2) {
      console.log("input==" + input);
      console.log("n1==" + n1);
      console.log("n2==" + n2);
      return input.replace(/Hello/, &#39;您好&#39;);
    }
  });
</script>

Example 4: Filter

nbsp;html>


  <title>自定义过滤器</title>
  <script></script>
  <style>
    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;
    }
  </style>


<p>
  </p>

    
•       序号       姓名       性别       年龄       分数     
    
•       {{$index+1}}       {{stu.name}}       {{stu.sex}}       {{stu.age}}       {{stu.score}}     
  

<script> var a3_3 = angular.module(&#39;a3_3&#39;, []); a3_3.controller(&#39;c3_3&#39;, [&#39;$scope&#39;, function ($scope) { $scope.bold = "bold"; $scope.data = [ {name: "张明明", sex: "女", age: 24, score: 95}, {name: "李清思", sex: "女", age: 27, score: 87}, {name: "刘小华", sex: "男", age: 28, score: 86}, {name: "陈忠忠", sex: "男", age: 23, score: 97} ]; }]); a3_3.filter(&#39;young&#39;, function () { return function (e, type) { var _out = []; var _sex = type ? "男" : "女"; for (var i = 0; i < e.length; i++) { if (e[i].age > 22 && e[i].age < 28 && e[i].sex == _sex) _out.push(e[i]); } return _out; } }); </script>

Example 5: Sort

nbsp;html>


  <title>表头排序</title>
  <script></script>
  <style>
    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;
    }
  </style>


<p>
  </p>

    
•       序号                  姓名                           性别                           年龄                           分数              
    
•            {{$index+1}}       {{stu.name}}       {{stu.sex}}       {{stu.age}}       {{stu.score}}     
  

<script> var a3_4 = angular.module(&#39;a3_4&#39;, []); a3_4.controller(&#39;c3_4&#39;, [&#39;$scope&#39;, function ($scope) { $scope.bold = "bold"; $scope.title = &#39;name&#39;; $scope.desc = 0; $scope.data = [ {name: "张明明", sex: "女", age: 24, score: 95}, {name: "李清思", sex: "女", age: 27, score: 87}, {name: "刘小华", sex: "男", age: 28, score: 86}, {name: "陈忠忠", sex: "男", age: 23, score: 97} ]; }]) </script>

Example 6: Input filtering

nbsp;html>


  <title>字符查找</title>
  <script></script>
  <style>
    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;
    }
  </style>


<p>
  </p><p>
    <input>
  </p>
  

    
•       序号       姓名       性别       年龄       分数     
    
•       {{$index+1}}       {{stu.name}}       {{stu.sex}}       {{stu.age}}       {{stu.score}}     
  

<script> var a3_5 = angular.module(&#39;a3_5&#39;, []); a3_5.controller(&#39;c3_5&#39;, [&#39;$scope&#39;, function ($scope) { $scope.bold = "bold"; $scope.key = &#39;&#39;; $scope.data = [ {name: "张明明", sex: "女", age: 24, score: 95}, {name: "李清思", sex: "女", age: 27, score: 87}, {name: "刘小华", sex: "男", age: 28, score: 86}, {name: "陈忠忠", sex: "男", age: 23, score: 97} ]; }]) </script> I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to use string templates in Vue

How to deal with Mac installation thrift error due to bison

The above is the detailed content of How to use AngularJS custom filter usage. For more information, please follow other related articles on the PHP Chinese website!