过滤器：

  • 过滤器中的 |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. Kruskal算法

    1.基本思想:设无向连通网为G＝(V, E),令G的最小生成树为T＝(U, TE),其初态为U＝V,TE＝{ },然后,按照边的权值由小到大的顺序,考察G的边集E中的各条边.若被考察的边的两个顶点属于 ...

  2. [Android Studio] *.jar 与 *.aar 的生成与*.aar导入项目方法

    主要讲解Android Studio中生成aar文件以及本地方式使用aar文件的方法. 在Android Studio中对一个自己库进行生成操作时将会同时生成*.jar与*.aar文件. 分别存储位置 ...

  3. GCD： 基本概念和Dispatch Queue 【转】

    什么是GCD? Grand Central Dispatch或者GCD,是一套低层API,提供了一种新的方法来进行并发程序编写.从基本功能上讲,GCD有点像 NSOperationQueue,他们都允 ...

  4. 黑马程序员：Java编程_IO流

    =========== ASP.Net+Android+IOS开发..Net培训.期待与您交流!=========== 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设 ...

  5. 黑苹果-IOS学习的开始

    深知安装黑苹果的不易,在这里写一下关于我的Thinkpad E430c安装黑苹果教程(Mac版本:Yosemite 10.10.4),希望能够帮助有需要的朋友. 首先贴上我的电脑配置报表: ----- ...

  6. Excel 导入 Sql Server出错——“文本被截断,或者一个或多个字符在目标代码页中没有匹配项”错误的解决

    有人说应该先转成Access, 再转到Sql Server. 其实用处并不大, 要截断的还是被截断了. 原因是,SQL Server的导入导出为了确定数据表的字段类型,取excel文件的前8行来判别. ...

  7. linux 查找文件与进程常用命令

    Linux的五个查找命令 1. find find是最常见和最强大的查找命令,你可以用它找到任何你想找的文件. find的使用格式如下: $ find <指定目录> <指定条件> ...

  8. H5移动端中必备技能

    Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面<meta name="viewport" content="width=device-wid ...

  9. java 存储到什么地方

    下面的内容主要来源于<Thinging in Java> 这本书的第22页讲到的,有5个不同的地方可以存储数据: 1).寄存器 这是最快的存储区,因为它位于处理器内部(没错,如果学过计算机 ...

  10. Linear Algebra lecture1 note

    Professor: Gilbert Strang Text: Introduction to Linear Algebra http://web.mit.edu/18.06   Lecture 1 ...