AngularJS中filter的使用实例详解

AngularJS中filter的使用实例详解

一、格式化数字为货币格式。 

<div>{{money|currency:"$"}}</div>
<div>{{money|currency:"RMB"}}</div>

script：

app.controller("crl", function($scope, $filter) {
    $scope.money="4545";
  });

显示为 

二、lowercase 格式化字符串为小写。 

姓名为 {{ lastName | lowercase }} 
app.controller("crl", function($scope, $filter) {
   $scope.lastName ="AAA";
});

显示为

aaa

三、uppercase 格式化字符串为大写。 

姓名为 {{ lastName | uppercase }} 

app.controller("crl", function($scope, $filter) {
   $scope.lastName ="aaa";
});

显示为

AAA

四、filter 从数组项中选择一个子集。 

<div>{{array|filter:"s"}}</div>
<div ng-repeat="item in array|filter:'s'">{{item.name}}</div> 
app.controller("crl", function($scope, $filter) {
    $scope.array = [ {
      name : 'Tobias'
    }, {
      name : 'Jeff'
    }, {
      name : 'Brian'
    }, {
      name : 'Igor'
    }, {
      name : 'James'
    }, {
      name : 'Brad'
    } ];
  });

显示为

[{"name":"Tobias"},{"name":"James"}]
Tobias
James

五、orderBy 根据某个表达式排列数组。

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。模型名字前加负号为降序，默认为升序

<div ng-repeat="item in array|orderBy:'-name'">降序  {{item.name}}</div>
  <div ng-repeat="item in array|orderBy:'name'">升序   {{item.name}}</div>

app.controller("crl", function($scope, $filter) {
    $scope.array = [ {
      name : 'Tobias',age:"18"
    }, {
      name : 'Jeff',age:"19"
    }, {
      name : 'Brian',age:"19"
    }, {
      name : 'Igor',age:"55"
    }, {
      name : 'James',age:"19"
    }, {
      name : 'Brad',age:"19"
    } ,{
      name : 'aaas',age:"19"
    }];
  });

显示为

降序 Tobias
降序 Jeff
降序 James
降序 Igor
降序 Brian
降序 Brad
降序 aaas
升序 aaas
升序 Brad
升序 Brian
升序 Igor
升序 James
升序 Jeff
升序 Tobias

5.1.多个模型排序（先按名字排序在按年龄排序）

<div ng-repeat="item in array|orderBy:['name','age']">升序   {{item.name}}{{item.age}}</div> 

app.controller("crl", function($scope, $filter) {
    $scope.array = [ {
      name : 'Tobias',age:"18"
    }, {
      name : 'Jeff',age:"19"
    }, {
      name : 'Brian',age:"19"
    }, {
      name : 'Igor',age:"55"
    }, {
      name : 'James',age:"19"
    }, {
      name : 'adsd',age:"19"
    } ,{
      name : 'adsd',age:"20"
    }]; 

  });

显示为

升序 adsd19
升序 adsd20
升序 Brian19
升序 Igor55
升序 James19
升序 Jeff19
升序 Tobias18

以上就是AngularJS filter的使用实例，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • AngularJS 中ui-view传参的实例详解

    Angular路由传参 首页 <!DOCTYPE html> <html ng-app="app"> <head> <title>路由传参</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" c

  • Angularjs实现下拉框联动的示例代码

    Angularjs实现下拉框联动的示例代码

    第一种联动方式,在网上看到的,感觉对于我的使用性不高,比较后端不会提供这种json... 实现截图 html <select ng-model="s1" ng-options="selectData.name for selectData in selectDatas"> <option value="">--产品类目--</option> </select> <select ng-model

  • AngularJS日程表案例详解

    功能:添加事件/完成事件/删除事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .note{ margin:0 auto; background: orange; color: ora

  • AngularJS通过ng-Img-Crop实现头像截取的示例

    最近闲着无聊,写了一个实用代码,AngularJS通过ng-Img-Crop实现头像截取,分享给大家 1.安装插件 bower install ngImgCrop 2.引入插件 <script src="ng-img-crop.js"></script> <link rel="stylesheet" type="text/css" href="ng-img-crop.css" rel="

  • AngularJs导出数据到Excel的示例代码

    公司一个新的需求导出Exce表格,研究了一下,最后终于实现,分享给大家. 1 使用FileSaver 第一次采用FileSaver.js 由于刚开始导致导出一片空白,还只能抓取网页里面的表格地址:https://github.com/eligrey/FileSaver.js HTML <div id="exportable"> <table width="100%"> <thead> <tr> <th>Na

  • Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）

    把js的验证方法改成angular可使用的方法 AngularJS文件的写法: $scope.clearNoNum = function(obj,attr){ //先把非数字的都替换掉,除了数字和. obj[attr] = obj[attr].replace(/[^\d.]/g,""); //必须保证第一个为数字而不是. obj[attr] = obj[attr].replace(/^\./g,""); //保证只有出现一个.而没有多个. obj[attr] = o

  • AngularJS中filter的使用实例详解

    AngularJS中filter的使用实例详解

    AngularJS中filter的使用实例详解 一.格式化数字为货币格式. <div>{{money|currency:"$"}}</div> <div>{{money|currency:"RMB"}}</div> script: app.controller("crl", function($scope, $filter) { $scope.money="4545"; });

  • AngularJS中的拦截器实例详解

    AngularJS中的拦截器实例详解 异步操作 有时候需要在拦截器中做一些异步操作.幸运的是, AngularJS 允许我们返回一个 promise 延后处理.它将会在请求拦截器中延迟发送请求或者在响应拦截器中推迟响应. 下面是项目中用到的代码. ZbtjxcApp.factory('myHttpInterceptor', ['$q', '$window','$location', function($q, $window,$location) { return { // 全局响应 'respo

  • ES6中的箭头函数实例详解

    本文实例讲述了ES6中的箭头函数.分享给大家供大家参考,具体如下: 语法 我们先来看看箭头函数的语法: ([param] [, param]) => { statements } param => expression param 是参数,根据参数个数不同,分这几种情况: () => { - } // 零个参数用 () 表示: x => { - } // 一个参数可以省略 (): (x, y) => { - } // 多参数不能省略 (): 示例 我们再来看看一些示例,看看在

  • 原生js中ajax访问的实例详解

    原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (

  • Django中的forms组件实例详解

    Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否输入,输入的长度和格式等正不正确.如果用户输入的内容有错误就需要在页面上相应的位置显示对应的错误信息.. Django form组件就实现了上面所述的功能. 总结一下,其实form组件的主要功能如下: 生成页面可用的HTML标签 对用户提交的数据进行校验 保留上次输入内容 先在应用目录下my_for

  • Python中logging日志库实例详解

    logging的简单使用 用作记录日志,默认分为六种日志级别(括号为级别对应的数值) NOTSET(0) DEBUG(10) INFO(20) WARNING(30) ERROR(40) CRITICAL(50) special 在自定义日志级别时注意不要和默认的日志级别数值相同 logging 执行时输出大于等于设置的日志级别的日志信息,如设置日志级别是 INFO,则 INFO.WARNING.ERROR.CRITICAL 级别的日志都会输出. |2logging常见对象 Logger:日志,

  • JDBC中resutset接口操作实例详解

    本文主要向大家展示JDBC接口中resutset接口的用法实例,下面我们看看具体内容. 1. ResultSet细节1 功能:封锁结果集数据 操作:如何获得(取出)结果 package com.sjx.a; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement; import org.junit.Test; //1. next方

  • PHP 中魔术常量的实例详解

    PHP 中魔术常量的实例详解 本文介绍下,php编程中的魔术常量,掌握并灵活应用这些方法与常量,对于提高php的编程水平,有很大的帮助.有需要的朋友参考学习下. 魔术常量: namespace ns1; class Test { function __construct() { var_dump(__LINE__); var_dump(__FILE__); var_dump(__DIR__); var_dump(__FUNCTION__); var_dump(__CLASS__); var_du

  • JSP中param动作的实例详解

    JSP中param动作的实例详解

    JSP中param动作的实例详解 一 语法 <jsp:param name="参数名" value="参数值"> 常常与<jsp:forward>一起使用,作为其子标签存在. 二 代码 1.login.jsp <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"

  • JSP中out对象的实例详解

    JSP中out对象的实例详解

    JSP中out对象的实例详解 一 什么是缓冲区 缓冲区:Buffer,所谓缓冲区就是内存的一块区域用来保存临时数据. 二 out对象 out对象是JspWrite类的实例,是向浏览器输出内容常用的对象. 三 常用方法 四 实例 <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%> <% String path

随机推荐