过滤器：

  • 过滤器中的 |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. OD调试15

    可以达到不脱壳的妙用.含义:把补丁写入程序代码,就叫内嵌补丁 那我们先看看今天的程序 是一个写DVD目录的程序,点continue就可以进入使用了      发现一个还有29天 就过期了   ,点en ...

  2. wamp出现You don’t have permission to access/on this server提示的解决方法

    本地搭建wamp 输入http://127.0.0.1访问正常,当输入http://localhost/ apache出现You don't have permission to access/on ...

  3. PHP 记录日志

    public function writelog($message) { $logFileDir = LOG_PATH; $logFile = 'monitor' . date('Y-m-d') . ...

  4. Win10/UWP新特性—Drag&Drop 拖出元素到其他App

    在以前的文章中,写过微软新特性Drag&Drop,当时可能由于处于Win10预览版,使用的VS也是预览版,只实现了从桌面拖拽文件到UWP App中,没能实现从UWP拖拽元素到Desktop A ...

  5. 通过Cloudera在hadoop生态圈中安装Sentry服务。

    写在张文章时,差点辣死我了.把sentry数据库密码搞掉了,导致hive,impala,hue都挂了.此事要引以为戒,以后要小心操作了. 安装Sentry服务 a)                在c ...

  6. secureCRT的一些小知识

    secureCRT 是一个非常不错的终端软件,在嵌入式开发过程中经常使用到,所以了解一下其快捷键操作是非常有必要的,可以提高开发效率. 0.在secureCRT里切换不同的窗口:ctrl+tab.   ...

  7. Erlang Materials Outline

    Motivation 因The Erlang Run-Time System迟迟没有出版,不等了. 梳理一下学习Erlang过程中的学习笔记,以准备一个关于Erlang的small but tight ...

  8. Axis2使war包发布为WebService

    首先 吐槽下 Axis2的Eclipse插件.不好用,而且局限性大.并且添加包的过程...会及其痛苦.(懂的自然懂) 而且 发布的aar文件,不能解压缩重新打包再压缩...尝试过添加 jar包,但报错 ...

  9. final关键字

    1.final类不能被继承,因此final类的成员方法没有机会被覆盖,默认都是final的.在设计类时候,如果这个类不需要有子类,类的实现细节不允许改变,并且确信这个类不会再 被扩展,那么就设计为fi ...

  10. Linux系统初始流程

    一.0S(内核的功能):平台类软件(通用软件) 进程管理:进程调度器(scheduler)维持一个任务结构(task_struct) 内存管理:如何使用线性地址空间,如何分段,如何分页,如何避免内存( ...