过滤器：

  • 过滤器中的 |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. 初学My Batis之入门

    MyBatis(百度百科): 下面我们来做第一个入门案例: 架构: jar包: 我们创建一个学生实体类 package cn.entity; /** * 学生实体类 * @author hyj * * ...

  2. HANA学习笔记1-搭建HANA学习环境

    一 硬件环境     两台电脑,一台为服务器装跑HANA虚拟机,一台为客户端运行HANA_STUDIO     服务器:内存至少需要16G     windows server 2003 64位    ...

  3. jquery.easyui代码详解，和遇到的问题，提供大家在使用的时候少走弯路（一）

    初次使用jquery.easyui这个东东,虽然简单,但还是很费力的去研究了一下使用,在使用过程中遇到的问题,下面代码会详细的注释到 引用的文件jquery.min.js              j ...

  4. hibernate 中createQuery与createSQLQuery两个用法

    hibernate 中createQuery与createSQLQuery两者区别是:前者用的hql语句进行查询,后者可以用sql语句查询前者以hibernate生成的Bean为对象装入list返回后 ...

  5. C - 搜索

    Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Status Descr ...

  6. python操作mysql数据库的相关操作实例

    python操作mysql数据库的相关操作实例 # -*- coding: utf-8 -*- #python operate mysql database import MySQLdb #数据库名称 ...

  7. Ubuntu vi 常用命令集合

    :w 保存文件但不退出vi:w file 将修改另外保存到file中,不退出vi:w! 强制保存,不推出vi:wq 保存文件并退出vi:wq! 强制保存文件,并退出viq: 不保存文件,退出vi:q! ...

  8. iOS截屏

    - (UIImage *)captureImageFromView:(UIView *)view{ UIGraphicsBeginImageContext(view.bounds.size); CGC ...

  9. Navicat premium工具常用快捷键

    Navicat premium是一款数据库管理工具,它可以以单一程式同时连线到MySQL.PostgreSQL. Oracle .SQL Server 及 SQLite 资料库,让管理不同类型的资料库 ...

  10. Hadoop集群搭建安装过程（三）（图文详解---尽情点击！！！）

    Hadoop集群搭建安装过程(三)(图文详解---尽情点击!!!) 一.JDK的安装 安装位置都在同一位置(/usr/tools/jdk1.8.0_73) jdk的安装在克隆三台机器的时候可以提前安装 ...