过滤器：

  • 过滤器中的 |json，可以使原来的json数据输出时按照换行的样式
  • 过滤器 | limitTo:2 可以截取字符串或者数组的前2位
  • 过滤器 | orderBy 可以进行排序，加入json里的key，就会根据这个key来排序，再加入一个参数true，就能逆排序

除了在标签里或者model里用过滤器，还可以在写JS或者JQ的区域通过

给controller注入$filter来直接在控制器里直接使用过滤器

<script type="text/javascript">

    var app = angular.module('myApp',[]);

    app.controller('cont1',['$scope','$filter',function($scope,$filter){

        $scope.name = $filter('uppercase')('hello'); //将hello全部转成大写

        $scope.number = $filter('number')('12392.8374',1); //限制一位小数

    }]);

</script>

</head>

<body ng-controller="cont1">

{{name}}

{{number}}

</body>

我们也可以通过模块对象下的filter()方法，自定义一个过滤器

var app = angular.module('myApp',[]);

app.filter('firstUpper',function(){ //在app模块下调用filter方法来自定义过滤器，名字是firstUpper

    return function(str，num){

        return str.charAt(0).toUpperCase()+str.substring(1);

    }

    //这里的str，其实就是被使用过滤器的那个元素，这个过滤器的功能是将字符串的第一个字母大写

    //另外，除了str，还可以传第二个参数，其实就是过滤器里用：隔开的第二个参数，当然，还可以加第三个或者更多

});

app.controller('cont1',['$scope',function($scope){

    $scope.name = 'hello';

}]);

</script>

</head>

<body ng-controller="cont1">

{{name|firstUpper}}

</body>

同样，自定义的过滤器也可以直接在controller里的js中通过服务的方式调用，接着上面的例子

app.controller('cont1',['$scope','$filter',function($scope,$filter){

    $scope.name = $filter('firstUpper')('hello'); //在controller中使用自定义的过滤器

}]);
  • 下面这个例子是通过ng-repeat和使用自带的过滤器来控制一个表格里的数据


var app = angular.module('myApp',[]);

app.controller('cont1',['$scope','$filter',function($scope,$filter){

    $scope.data = [

        {'name':'Victor','age':33},

        {'name':'Mary','age':30},

        {'name':'Qinyu','age':4},

        {'name':'Yushuang','age':58},

        {'name':'Yongpin','age':62}

    ];

    $scope.onOff = true; //定义一个scope下的变量，来实现正序和反序的切换

    $scope.myOrder = function(str){

        if ($scope.onOff) {

            $scope.data =  //使用angular自带的orderBy过滤器， $filter('orderBy')($scope.data,str,true);

        }else{

            $scope.data = $filter('orderBy')($scope.data,str);

        }

        $scope.onOff = !$scope.onOff;

    };

}]);

</script>

</head>

<body ng-controller="cont1">

<table border="1">

<thead>

<tr>

    <th ng-click="myOrder('name')">姓名</th> <!--点击这个表头标题，可以调用myOrder函数来排序，当然，可以根据传参的不同来根据不同关键字排序-->

    <th ng-click="myOrder('age')">年龄</th>

</tr>

</thead>

<tbody>

<tr ng-repeat="item in data">

    <td>{{item.name}}</td>

    <td>{{item.age}}</td>

</tr>

</tbody>

下面这个例子是在上面的基础上增加一个搜索功能，用到的技能有

  • 通过将原始数据保留，model的数据被赋值原始数据，这样筛选filter后的数据不会改变原始数据
  • 过滤器中filter方法的使用
    <script type="text/javascript">

        var app = angular.module('myApp',[]);

        app.controller('cont1',['$scope','$filter',function($scope,$filter){

            $scope.oriData = [ //这是原始数据，不要在使用filter方法时去改变它

                {'name':'Victor','age':33},

                {'name':'Mary','age':30},

                {'name':'Qinyu','age':4},

                {'name':'Yushuang','age':58},

                {'name':'Yongpin','age':62}

            ];

            $scope.data = $scope.oriData; //可以在这里将原始数据赋值给model数据data

    //这里添加筛选功能，使用filter这个方法，第一个参数放要从哪个数据源中筛选，第二个参数写的是根据哪个关键字

            $scope.mySearch = function(){

                $scope.data = $filter('filter')($scope.oriData,$scope.searchContent);

            };

        }]);

    </script>

</head>

<body ng-controller="cont1">

<!--这里要给输入框添加ng-model要写搜索的关键字-->

<input type="text" ng-model="searchContent"><button ng-click="mySearch()">搜索</button>

<table border="1">

......

......

【学】AngularJS日记（4）- 过滤器的使用的更多相关文章

  1. 前端MVC学习总结——AngularJS验证、过滤器

    前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...

  2. 【pwn】学pwn日记——栈学习（持续更新）

    [pwn]学pwn日记--栈学习(持续更新) 前言 从8.2开始系统性学习pwn,在此之前,学习了部分汇编指令以及32位c语言程序的堆栈图及函数调用. 学习视频链接:XMCVE 2020 CTF Pw ...

  3. 【pwn】学pwn日记（堆结构学习）

    [pwn]学pwn日记(堆结构学习) 1.什么是堆? 堆是下图中绿色的部分,而它上面的橙色部分则是堆管理器 我们都知道栈的从高内存向低内存扩展的,而堆是相反的,它是由低内存向高内存扩展的 堆管理器的作 ...

  4. 【学】AngularJS日记（3）- $apply(), run()方法

    $scope.$apply()方法可以强制$apply()里运行的函数所改变的model里的数据直接反应到view里,因为在angular的环境中,有时会用到原生js或者jquery的时候,这些行为有 ...

  5. 【学】AngularJS日记（2）

    数组循环放到新生成的li中 <ul ng-init="arr=[12,5,6,394,344]"> <li ng-repeat="item in arr ...

  6. 【学】AngularJS日记（1） - 常用工具

    angular.isArray(a) 判断a是否为数组 angular.isDate 是否为时间对象 angular.isDefined 判断元素是否存在 angular.isUndefined an ...

  7. 前端MVC学习总结（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  8. angularjs之filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...

  9. AngularJS中的过滤器

    欢迎大家指导与讨论 : ) 一.前言 AngularJS的过滤器能够将数据在被指令处理到显示在视图之前进行处理和转换.而且,过滤器不会修改作用域中的数据本身,即过滤器会保证数据的完整性.这样子能够允许 ...

随机推荐

  1. Html 开发工具 之Hbulider

    下载地址 : 百度搜索该名字即可 或 点击此处 选择  文件->新建Web项目 输入项目名称即可  如下图 它会自动生成一些 文件夹 或文件,不需要的删除即可.

  2. formValidator 表单验证

    作为一名程序员,在解决工作中遇到问题之后,做一些总结是有必要的,既方便总结温习相关知识点,也为广大的程序员提供了一些工作经历,给予同行一面明鉴. 首先,众所周知的,我们需要引用js类库: eg:< ...

  3. 网络虚拟化中的 offload 技术：LSO/LRO、GSO/GRO、TSO/UFO、VXLAN

    offload 现在,越来越多的网卡设备支持 offload 特性,来提升网络收/发性能.offload 是将本来该操作系统进行的一些数据包处理(如分片.重组等)放到网卡硬件中去做,降低系统 CPU ...

  4. 【转】 TechED2010与我(三) —— 初识云计算

    作者用到的比喻很好. 网址:TechED2010与我(三) -- 初识云计算 初识云计算最近"云计算"被炒的很热,但是由于工作重点主要是做WinForm的控件开发,对云计算的接触比 ...

  5. 2016年JS面试题目汇总

    1.怎样添加.移除.移动.复制.创建和查找节点? //1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 ...

  6. Windows 下安装cryptography-1.6

    由于proxy限制不能使用pip install cryptography命令安装cryptography,所以安装这个python库折腾了一天多的时间,差点就怀疑人生了,好在柳暗花明,惊喜出现了.下 ...

  7. POJ 1321 DFS

    题意:POJ少见的中文题,福利啊. 思路: 一开始也没有思路呃呃呃 . 裸搜,连样例都过不去...参照了网上的题解:一行一行DFS 茅塞顿开啊. #include <cstdio> #in ...

  8. mysql数据库的基本操作

    mysql数据库的基本操作dos命令启动mysql服务:net start mysql启动数据库: mysql -uroot -p查看所有的数据库:show databases:新建数据库:creat ...

  9. Python数学函数

    1.Python数学函数 1.abs(x):取绝对值,内建函数 2.math.ceil(x):向上取整,在math模块中 3.cmp(x,y):如果 x < y ,返回-1:如果 x == y ...

  10. java的三大框架（二）---Struts2

    Strtu2框架 1.控制器:ActionServlet充当控制层 2.模型层:由ActionForm及业务JavaBean实现 3.视图:用户的看到并与之交互的界面   由struts标签库和jsp ...