深入理解angularjs过滤器

•在html文件中和在js文件中使用

$scope.form_time = $filter('date')($scope.time, 'yyyy-MM-dd HH:mm:ss');

<p>{{time | date: 'yyyy-MM-dd HH:mm:ss'}}</p>

•内部过滤器和自定义过滤器

.filter('my_data_format',[function(){
  return function(data,str,sss){
    console.log('data: ',data,' str: ',str,' sss: ',arguments[2]);
  }
}]);
//var1就是第一个参数data， 123是第二个参数str， this是第三个参数
<p>{{var1 | my_data_format : 123 : 'this'}}</p>

//对传入的数据进行处理
.filter('my_data_format',[function(){
  return function(data,str){
    var arr=[];
    angular.forEach(data, function(one_list){
      if(one_list.status == str){
        arr.push(one_list);
      }
    });
    return arr;
  }
}]);
//过滤器可以用在绑定的值中,也可以用在ng-if="(lists | my_data_format: '2').length>0", 和ng-show等；类似的表达式中。作为判断语句
<p ng-repeat = "list in lists">姓名:{{list.name}},人数{{(lists | my_data_format: '2').length}}</p>

以上这篇深入理解angularjs过滤器就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJs学习第八篇 过滤器filter创建

    AngularJs学习第八篇 过滤器filter创建

    demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constant("productsUrl", "http://localhost:/products") .controller("defaultCtrl", function ($scope, $http, productsUrl) { $http.get(productsUrl).success

  • 详解AngularJS中的filter过滤器用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的. 一,内置的过滤器 1,uppercase,lowercase大小转换 {{ "lower cap string" | uppercase }} //结果:

  • Angularjs过滤器使用详解

    给大家介绍下什么是 AngularJS? AngularJS是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利用

  • AngularJS过滤器详解及示例代码

    AngularJS过滤器详解及示例代码

    过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入.以下是常用的过滤器的列表. S.No. 名称 描述 1 大写 转换文本为大写文本. 2 小写 转换文本为小写文本. 3 货币 货币格式格式文本. 4 过滤器 过滤数组中它根据所提供的标准的一个子集. 5 排序 排序提供标准的基础数组. 大写过滤器 添加大写的过滤器使用管道符的表达式.在这里,添加了大写过滤器,全部用大写字母打印学生姓名. Enter first name:<input type="text" ng

  • AngularJS入门教程之过滤器详解

    在这一步你将学习到如何创建自己的显示过滤器. 请重置工作目录: git checkout -f step-9 现在转到一个手机详细信息页面.在上一步,手机详细页面显示"true"或者"false"来说明某个手机是否具有特定的特性.现在我们使用一个定制的过滤器来把那些文本串图形化:√作为"true":以及×作为"false".来让我们看看过滤器代码长什么样子. 步骤8和步骤9之间最重要的不同在下面列出.你可以在GitHub里看到

  • AngularJS中的过滤器filter用法完全解析

    AngularJS中的过滤器filter用法完全解析

    在AngularJS的世界里,filter提供了一种格式化数据的方法,Angular也提供给我们了很多内建的过滤器,并且建立自定义过滤器也是相当的简单 在HTML的模板绑定{{}}中,我们使用 | 来调用过滤器,比如,我们想让字符串全部大写字符显示: {{ name | uppercase }} 当然了,我们也可以在JavaScript中使用$filter服务来调用过滤器,还拿字符串大写来举例: app.controller('DemoController', ['$scope', '$filt

  • 详解AngularJS中自定义过滤器

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).limitTo(限制个数).lowercase(小写).uppercase(大写).number(数字).orderBy(排序).总共九种.除此之外还可以自定义过滤器,这个就强大了,可以满足任何

  • AngularJS 过滤器的简单实例

    AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase 格式化字符串为小写. orderBy 根据某个表达式排列数组. uppercase 格式化字符串为大写. 表达式中添加过滤器 过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中.. ((下面的两个实例,我们将使用前面章节

  • AngularJS 自定义过滤器详解及实例代码

    AngularJS 自定义过滤器详解及实例代码

    AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果. 通过使用管道,可以便于双向的数据绑定中视图的展现. 过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数. 实现方式 下面看一下如何定义声明一个过滤器,首先依然是要创建我们自己的模块myAppModule var myAppModule=agular.module("myApp",[]); 接下来在模块的基础上,创建过滤器: myAppModule.fil

  • 详解AngularJS过滤器的使用

    AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如,假设我们希望将字符串 转换成大写,可以对字符串中的每个字符都单独进行转换操作,也可以使用过滤器: {{ name | uppercase }} 在JavaScript代码中可以通过$filter来调用过滤器.例如,在JavaScript代码中使用lowercase 过滤器: app.controller('DemoControlle

随机推荐