简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

怎样使用AngularJS自定义过滤器用法

php中世界最好的语言
发布： 2018-05-29 10:37:19
原创
1442 人浏览过

这次给大家带来怎样使用AngularJS自定义过滤器用法，使用AngularJS自定义过滤器用法的注意事项有哪些，下面就是实战案例，一起来看一下。

过滤器结构

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

示例一：是否包含

<!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>
<p ng-controller="myAppCtrl">
  <p>
    <table>
      <tr>
        <th>Name</th>
        <th>Phone</th>
      </tr>
      <!--写法1-->
      <tr ng-repeat="friend in friends |myfilter">
      <!--写法2-->
<!--<tr ng-repeat="friend in newArr=(friends | myfilter)">-->
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
      </tr>
    </table>
  </p>
</p>
<script type="text/javascript">
  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: '11555-4321'},
      {name: 'Adam', phone: '33555-5678'},
      {name: 'David', phone: '387555-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(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>
</body>
</html>
登录后复制

示例二：倒序

<!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>
<p ng-controller="myAppCtrl">
  姓名:{{ name }}<br>
  倒序:{{ name | reverse }}<br>
  倒序并大写:{{ name | reverse:true }}
</p>
<script type="text/javascript">
  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>
</body>
</html>
登录后复制

示例三：替换

<!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 ng-controller="myAppCtrl">
<p>
  <p>
    {{welcome | replaceHello}}<br/>
    {{welcome | replaceHello:3:5}}<br/>
  </p>
</p>
<script type="text/javascript">
  var app = angular.module("myApp", []);
  app.controller("myAppCtrl", ["$scope", function ($scope) {
    $scope.welcome = "Hello AngularJs";
  }]);
  //自定义过滤器
  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/, '您好');
    }
  });
</script>
</body>
</html>
登录后复制

示例四：筛选

<!doctype html>
<html ng-app="a3_3">
<head>
  <title>自定义过滤器</title>
  <script src="../Script/angular.min.js"
      type="text/javascript"></script>
  <style type="text/css">
    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>
</head>
<body>
<p ng-controller="c3_3">
  <ul>
    <li ng-class="{{bold}}">
      <span>序号</span>
      <span>姓名</span>
      <span>性别</span>
      <span>年龄</span>
      <span>分数</span>
    </li>
    <li ng-repeat=" stu in data | young:0"
      ng-class-odd="&#39;odd&#39;"
      ng-class-even="&#39;even&#39;">
      <span>{{$index+1}}</span>
      <span>{{stu.name}}</span>
      <span>{{stu.sex}}</span>
      <span>{{stu.age}}</span>
      <span>{{stu.score}}</span>
    </li>
  </ul>
</p>
<script type="text/javascript">
  var a3_3 = angular.module('a3_3', []);
  a3_3.controller('c3_3', ['$scope', 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('young', 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>
</body>
</html>
登录后复制

示例五：排序

<!doctype html>
<html ng-app="a3_4">
<head>
  <title>表头排序</title>
  <script src="../Script/angular.min.js"
      type="text/javascript"></script>
  <style type="text/css">
    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>
</head>
<body>
<p ng-controller="c3_4">
  <ul>
    <li ng-class="{{bold}}">
      <span>序号</span>
      <span ng-click="title=&#39;name&#39;;desc=!desc">
          姓名
        </span>
      <span ng-click="title=&#39;sex&#39;;desc=!desc">
          性别
        </span>
      <span ng-click="title=&#39;age&#39;;desc=!desc">
          年龄
        </span>
      <span ng-click="title=&#39;score&#39;;desc=!desc">
          分数
        </span>
    </li>
    <li ng-repeat=" stu in data | orderBy : title : desc">
    <!--title：属性值，desc：升序or降序-->
      <span>{{$index+1}}</span>
      <span>{{stu.name}}</span>
      <span>{{stu.sex}}</span>
      <span>{{stu.age}}</span>
      <span>{{stu.score}}</span>
    </li>
  </ul>
</p>
<script type="text/javascript">
  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: "张明明", sex: "女", age: 24, score: 95},
      {name: "李清思", sex: "女", age: 27, score: 87},
      {name: "刘小华", sex: "男", age: 28, score: 86},
      {name: "陈忠忠", sex: "男", age: 23, score: 97}
    ];
  }])
</script>
</body>
</html>
登录后复制

示例六：输入过滤

<!doctype html>
<html ng-app="a3_5">
<head>
  <title>字符查找</title>
  <script src="../Script/angular.min.js"
      type="text/javascript"></script>
  <style type="text/css">
    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>
</head>
<body>
<p ng-controller="c3_5">
  <p>
    <input id="txtkey" type="text"
        ng-model="key" placeholder="请输入姓名关键字"/>
  </p>
  <ul>
    <li ng-class="{{bold}}">
      <span>序号</span>
      <span>姓名</span>
      <span>性别</span>
      <span>年龄</span>
      <span>分数</span>
    </li>
    <li ng-repeat=" stu in data | filter : {name:key}">
      <span>{{$index+1}}</span>
      <span>{{stu.name}}</span>
      <span>{{stu.sex}}</span>
      <span>{{stu.age}}</span>
      <span>{{stu.score}}</span>
    </li>
  </ul>
</p>
<script type="text/javascript">
  var a3_5 = angular.module('a3_5', []);
  a3_5.controller('c3_5', ['$scope', function ($scope) {
    $scope.bold = "bold";
    $scope.key = '';
    $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>
</body>
</html>
登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样使用Vue中字符串模板

如何处理Mac安装thrift因bison报错

以上是怎样使用AngularJS自定义过滤器用法的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
angularjs javascript 过滤器
来源：php.cn
上一篇：如何操作Angular实现模版驱动表单的自定义校验功能 下一篇：mac内nodejs如何更新最新版本
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
仅 CSS 方法可在单击时动态修改图像 src，无需使用 JavaScript 我需要仅使用css更改鼠标单击时图像的src喜欢img:active{}
来自于 2024-04-06 19:25:49
0
1
505
放大 d3.js 时散点图点不会保持值 这是我第一次使用d3.js，所以请耐心等待。我在vue.js文件中将其作为纯JavaScript实现。我正在尝试制作具有缩放功能的散点图。到目前为止，我几乎一切正常，但当我缩放时，...
来自于 2024-04-06 18:16:26
0
1
403
供应商特定伪元素上的 JavaScript 悬停事件 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
来自于 2024-04-06 15:35:24
0
1
274
使用 Javascript / Jquery 提交表单且不带按钮 我试图通过调用JavaScript函数并使用JQUERY/PHP执行表单来提交没有按钮的表单。我希望表单在后端静默执行，而无需重新加载页面。不幸的是，它不断返回JavaScript...
来自于 2024-04-06 14:54:03
0
2
421
使用'折叠显示”类自定义 Bootstrap 手风琴标题的外观 我想设置具有类collapseshow的面板的卡标题样式。在此示例中，它是第一个面板。我尝试使用CSS来使用.accordion.card.card-headerbutton.bt...
来自于 2024-04-06 12:53:11
0
1
376
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！