AngularJS快速入门指南06:过滤器-程序员宅基地

  通过管道字符(‘|’),过滤器可以被添加到表达式和指令中。


AngularJS过滤器

  AngularJS过滤器可以被用来转换(格式化)数据:

过滤器 描述
currency 将数字格式化为现金格式。
filter 从一个集合中选择子项。
lowercase 将字符串转换为小写形式。
orderBy 通过一个表达式对集合元素进行排序。
uppercase 将字符串转换为大写形式。

在表达式中添加过滤器

  过滤器可以通过管道字符(‘|’)被添加到表达式。

  接下来的两个示例我们将使用在之前的章节中使用过的person控制器。

  uppercase过滤器用来将给定的字符串转换成大写形式:

<div ng-app="" ng-controller="personCtrl">

<p>The name is {
    { lastName | uppercase }}</p>

</div>

运行

  lowercase过滤器用来将给定的字符串转换成小写形式:

<div ng-app="" ng-controller="personCtrl">

<p>The name is {
    { lastName | lowercase }}</p>

</div>

运行


currency过滤器

  currency过滤器用来将数字格式化为现金格式:

<div ng-app="" ng-controller="costCtrl">

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">

<p>Total = {
    { (quantity * price) | currency }}</p>

</div>

运行


将过滤器添加到指令

  过滤器也可以通过管道字符(‘|’)被添加到指令。

  orderBy过滤器通过表达式对数组进行排序:

<div ng-app="" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {
     { x.name + ', ' + x.country }}
  </li>
</ul>

<div>

运行


通过输入进行过滤

  通过在指令中使用管道字符(‘|’),后面紧跟filter加冒号再加上一个模型的名称,可以形成一个输入过滤器,用来根据用户输入的内容对集合进行过滤:

<div ng-app="" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {
     { (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

运行

 

转载于:https://www.cnblogs.com/jaxu/p/4489278.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ddjq1044/article/details/101340256

智能推荐

tf用法大全:tf.add、tf.subtract、tf.multiply、tf.scalar_mul、tf.div、tf.divide、tf.truediv、tf.flo-程序员宅基地

文章浏览阅读4.3k次。Arithmetic Operatorstf.add、tf.subtract、tf.multiply、tf.scalar_mul、tf.div、tf.divide、tf.truediv、tf.floordiv、tf.realdiv、tf.truncatediv、tf.floor_div..._tf.add

如何让一行文本显示一定的宽度,超出省略号代替_超出宽度省略号-程序员宅基地

文章浏览阅读1.7k次。#box{ width:100px; background-color:#87CEEB; padding:2px 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} fd之fa星旅馆有限公司系亚洲规模最大的综合性旅游企业集团_超出宽度省略号

盲人程序员如何编程?全靠每分钟450个单词-程序员宅基地

文章浏览阅读2.4k次,点赞11次,收藏4次。昨天有人给我发了一篇文章,我一看到图就觉得很奇怪,这个人坐在一个小隔间里,戴着耳机,敲着键盘,但是他的面前却没有屏幕, 他在干什么?他叫Tuukka Ojala, 是一个..._盲人如何编程

使用vue-pdf 给pdf加水印_vue pdf加水印-程序员宅基地

文章浏览阅读2.2k次。代码】使用vue-pdf 给pdf加水印。_vue pdf加水印

「 LaTex 」写论文,修改公式内行距的方法_\vspace设置段落行距-程序员宅基地

文章浏览阅读3.4k次。一.前言在官网给的LaTex模板里作业,有时会遇到带有分式或大括号的公式顶端重叠的问题,下面给出解决方法。二.技术实现使用临时修改行距指令\vspace{0.5ex}*{0.5ex}中的数字可以任意调整。三.实例展示修改前如图:修改后如图:*亲测有效..._\vspace设置段落行距

eclipse jsEclipse javascript编辑器-程序员宅基地

文章浏览阅读7.2k次,点赞17次,收藏15次。Eclipse JavaScript插件前言一、JsEclipse是什么?二、使用步骤1.下载2.安装插件总结前言免费下载jseclipse插件,看不惯那些赚积分的。关键字:eclipse、eclipse插件、eclipse js插件、eclipse js编辑器、eclipse jsEclipse、jseclipse、JavaScript编辑器、好用的JavaScript编辑器一、JsEclipse是什么?当然是*.js的编辑器了,代码提示,关键字高亮,重要是好湿,啊不,好使。二、使用步骤_jseclipse

随便推点

JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误-程序员宅基地

文章浏览阅读55次。下载了最新的JUnit版本,是4.11,结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误,上网查了一下,一般的解决方案是,换一个低一点的版本就好了。还有人说,是缺少hamcrest的包。去官网又看了一下,结果发现这样一段话:junit.jar: Includes the Hamcres..._电脑出现订单4.11可使用什么原因

Java自然语言处理 LingPipe-程序员宅基地

文章浏览阅读486次。LingPipe是一个自然语言处理的Java开源工具包。LingPipe目前已有很丰富的功能,包括主题分类(Top Classification)、命名实体识别(Named Entity Recognition)、词性标注(Part-of Speech Tagging)、句题检测(Sentence Detection)、查询拼写检查(Query Spell Checking)、兴趣短语检测(Int..._tokenizerfactory tokenizer_factory = indoeuropeantokenizerfacto

BW文件格式打开工具XnView-程序员宅基地

文章浏览阅读9.2k次。BW格式文件打开工具 XnView_bw文件

警告: A C3P0Registry mbean is already registered. This probably means that an application...-程序员宅基地

文章浏览阅读5.6k次。问题描述:六月 23, 2017 9:16:59 下午 com.mchange.v2.log.MLog 信息: MLog clients using java 1.4+ standard logging.六月 23, 2017 9:16:59 下午 com.mchange.v2.c3p0.C3P0Registry banner信息: Initializing c3p0-0.9.2-p_a c3p0registry mbean is already registered

图文混排的实践+输入式动态插入表情_qq 图文混排-程序员宅基地

文章浏览阅读860次。暑假快要结束了,这个暑假献给_qq 图文混排

linux grep 递归_如何在Linux中通过子目录递归使用Grep命令?-程序员宅基地

文章浏览阅读4.9k次,点赞2次,收藏6次。linux grep 递归grep is very useful command to search files and directories. What makes grep powerful is that it can search file contents. We can search file content according to extension. Recursive beh..._grep 递归