AngularJSカスタムフィルターの使用方法

今回はAngularJSカスタムフィルターの使い方と、AngularJSカスタムフィルターを使用する際の注意点を紹介します。実際の事例を見てみましょう。

フィルター構造

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

例1:

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>

を含めるかどうか例2: 逆順

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>

例3:

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>

を置き換える例4: フィルター

そうです

例5 : 並べ替え

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>

例 6: 入力フィルタリング

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>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue で文字列テンプレートを使用する方法

Bison による Mac インストールの節約エラーに対処する方法

以上がAngularJSカスタムフィルターの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。