AngularJS中过滤器的使用与自定义实例代码

前言

相信大家都知道过滤器的使用：一种是在html中的使用，一种是在js代码中的使用，下面我们来通过实例深入了解。

实例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="day2/src/angular.js"></script>
    <style type="text/css">
    </style>
  </head>
  <body> 

    <div ng-app="fristApp">
      <div ng-controller="fristController"> 

        <!--多个过滤器之间用 | 链接--> 

        <!--参数的实质就是把参数添加在数字前面（在货币符号处使用）-->
        {{money | currency}}<br />
        {{money | currency:'￥'}}<br /> 

        {{str | uppercase}}<br />
        {{json | json}}<br /> 

        <!-- 会进行四舍五入-->
        {{num | number:3}}<br /> 

        <!--时间 只有MM是大写-->
        {{currenttime | date:'yyyy-MM-dd-hh'}} 

        <!--字符串的切割-->
        {{strr | limitTo:3}}
        {{strr | limitTo:-3}} 

        <!--按照person的age进行排序-->
        <ul>
          <li ng-repeat="person in arr | orderBy:'age':false">
            {{person.name}}
          </li>
        </ul> 

        <!--true 位于第二个位置，其中num是不能加“”的，上面的加“”是因为name是他的一个属性-->
        <ul>
          <li ng-repeat="n in [2,43,432,453,65] | orderBy:num:true">
            {{n}}
          </li>
        </ul> 

        <!--根据person的属性进行过滤-->
        <input type="text" ng-model="name" />
        <ul>
          <li ng-repeat="person in arr | filter:{'name':name}">
            {{person.name}}
          </li>
        </ul> 

      </div> 

    </div>
  </body>
  <script type="text/javascript">
    var myApp = angular.module('fristApp',[]);
    myApp.controller('fristController',function($scope,$filter){
      $scope.money = 100;
      $scope.str = "fsHIOiiiiIU" ;
      $scope.json = {name:"zhangsan",age:40};
      $scope.num = 12432432432;
      var time = new Date();
      $scope.currenttime = time.getTime(); 

      $scope.strr = "fujichao"; 

      $scope.arr = [
        {name:'zhangsan',age:33},
        {name:'zhangsan2',age:30},
        {name:'zhangsan3',age:44},
        {name:'zhangsan4',age:3}
      ]; 

      // 如果数组的元素相等的话，这两个元素的内存地址是相同的。
      var arrnum = [12,12,33,44];
      if(arrnum[0]===arrnum[1]){
        console.log("fji")
      }; 

      /* 在JS中使用过滤器*/ 

      // $filter(过滤器的名字)(对象，条件)
      var val = $filter('currency')($scope.money,'￥');
      console.log(val); 

      var string1 = "fssdHIUHIjiojjOIJIOJ"
      var valStr = $filter('uppercase')(string1);
      console.log(valStr)
    })
  </script>
</html>

运行效果图如下

总结

以上就是这篇文章的全部内容，希望对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • 详解Angular的内置过滤器和自定义过滤器【推荐】

    在实际的开发过程中,很多後端返回给我们的数据都是需要格式化处理的,在angular中为我们内置提供了filter指令,可以很方便的对数据进行处理.首先我们看看在视图中是如何使用过滤器的. 1.currency(货币)格式化 <div ng-controller="Aaa"> <p>{{name | currency:'￥'}}</p> </div> <script type="text/javascript"&g

  • 详解AngularJS中自定义过滤器

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

  • Angularjs 依赖压缩及自定义过滤器写法

    具体代码如下所示: <!DOCTYPE html> <html> <body> <header> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> <script src="filt

  • 详解AngularJS中$filter过滤器使用(自定义过滤器)

    1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般

  • 使用AngularJS创建自定义的过滤器的方法

    Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): 我们的自定义过滤器叫做 "myfilter", 它有由 ':'隔开的4个参数. 这是一个将会用到的样本输入: $scope.friends = [{name:'John', phone:'555-1276'}, {name:'Annie', phone:'800-BIG-MARY'}, {na

  • 简述angular自定义过滤器在页面和控制器中的使用

    AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果. 通过使用管道,可以便于双向的数据绑定中视图的展现. 过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数. 首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参数1,参数2,...){ return Obj; //这里返

  • Angular.Js中过滤器filter与自定义过滤器filter实例详解

    Angular.Js中过滤器filter与自定义过滤器filter实例详解

    本文主要给大家介绍了Angular.Js过滤器filter与自定义过滤器filter的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一.AngularJS的filter过滤器: uppercase|lowercase:大小写转换过滤 json:json格式过滤 date:日期格式过滤 number:数字格式过滤 currency:货币格式过滤 filter:查找 limitTo:字符串对象截取 orderBy:对象排序 <!DOCTYPE html> <html lang=&

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

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

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

  • AngularJS中过滤器的使用与自定义实例代码

    AngularJS中过滤器的使用与自定义实例代码

    前言 相信大家都知道过滤器的使用:一种是在html中的使用,一种是在js代码中的使用,下面我们来通过实例深入了解. 实例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过滤器</title> <script src="day2/src/angular.js"></script> <styl

  • AngularJS中的Promise详细介绍及实例代码

    Angular中的Promise 在用jQuery的时候就知道 promise 是 Js异步编程模式的一种模式,但是不是很明白他跟JQuery的deferred对象有什么区别.随着公司项目的进行,要跟后台接数据了,所以决定搞定它. Promise Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件. 我们知道,在编写JavaScript异步代码时,callback是最最简单的机制,可是用这种机制的话必须牺牲控制流.异常处理和函数语义化为代价,甚至会

  • angularjs中使用ng-bind-html和ng-include的实例

    下面这个例子,往div标签内添加html内容: <!doctype html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>demo</title> <script type="text/javascript" src="lib/angularjs/angular.min.js"

  • 对angularJs中ng-style动态改变样式的实例讲解

    如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head> <body> <div ng-app="module" ng-controller="

  • angularJs中$http获取后台数据的实例讲解

    1.html <div ng-app="module" ng-controller="ctrl"> <table border="1" width="600"> <tr> <td>网站名称</td> <td>网址</td> </tr> <tr ng-repeat="v in data"> <td

  • 微信小程序中button去除默认的边框实例代码

    微信小程序中button去除默认的边框的实现方法如下所示: button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px; box-sizing:border-box; font-size:18px; text-align:center; text-decoration:none; line-height:2.5555555

  • iOS开发中Swift 指纹验证功能模块实例代码

    iOS调用TouchID代码: override func viewDidLoad() { super.viewDidLoad() let context = LAContext() var error: NSError? = nil let canEvaluatePolicy = context.canEvaluatePolicy(LAPolicy.deviceOwnerAuthenticationWithBiometrics, error: &error) as Bool if error

  • Django中的cookie与session操作实例代码

    添加cookie: def login(req): if req.method=="POST": uf = UserInfoForm(req.POST) if uf.is_valid(): username = uf.cleaned_data["username"] password = uf.cleaned_data["password"] print username,password users = UserInfo.objects.fil

  • JSP中动态合并单元格的实例代码

    废话不多说了,具体代码如下所示: <span style="font-size:14px;"> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <table width="100%" border="0" cellspacing="0" cellpadding="0&q

  • Android 中隐藏虚拟按键的方法实例代码

    下面通过一段代码给大家讲解android 隐藏虚拟按键的方法,废话不多说了,大家多多看看代码和注释吧,具体代码如下所示: /** * 隐藏虚拟按键,并且全屏 */ protected void hideBottomUIMenu() { //隐藏虚拟按键,并且全屏 if (Build.VERSION.SDK_INT > 11 && Build.VERSION.SDK_INT < 19) { // lower api View v = this.getWindow().getDec

随机推荐