AngularJs基本篇 三(常用指令+过滤器)

于 2016-02-18 10:00:46 发布
阅读量1.4k 收藏
点赞数
分类专栏： angularjs 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chr23899/article/details/50683910
版权

1.常用指令

a.ng-hide 和 ng-show

ng-hide指令，用于控制部分HTML元素可见(ng-hide="false")和不可见状态(ng-hide="true"),ng-show指令和ng-hide用法相同但行为相反。

<!DOCTYPE HTML>
<html>
<head>
	<title> test </title>
	<meta charset="utf-8">
	<script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
</head>
<body>
  <div ng-app="" ng-init="show=false">
    <button ng-click="show=!show">Change</button>
    <p ng-hide="show">show_true_1</p>
    <p ng-hide="!show">show_false_1</p> 
    <p ng-show="!show">show_true_2</p>
    <p ng-show="show">show_false_2</p>
  </div>
</body>
</html>

运行结果如下: 

show_true_1

show_true_2

b.ng-repeat指令

ng-repeat指令，遍历一个数据集合中的每个数据元素，并且加载HTML模版把数据渲染出来，当我们要向HTML容器节点中添加更多类似DOM元素的时候，使用ng-repeat是再好不过了。 
<!DOCTYPE HTML>
<html>
<head>
	<title> 测试页 </title>
	<meta charset="utf-8">
	<script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
</head>
<body>
  <div ng-app="" ng-init="fruits = [
                          {kind:'apple',price:5.5},
                          {kind:'banana',price:3.8},
                          {kind:'orange',price:2.5},
                          {kind:'watermelon',price:4.6}]">
    <table>
      <tr ng-repeat="f in fruits">
        <td>{{'Kind:' + f.kind + ', Price:' + f.price}}</td>
      </tr>
    </table>
  
  </div>
</body>
</html>
运行结果如下:

Kind:apple, Price:5.5
Kind:banana, Price:3.8
Kind:orange, Price:2.5
Kind:watermelon, Price:4.6

2.过滤器

a.使用AngularJS过滤器

可以实现对字符串的大小写转换、货币格式的转换、数组的过滤等等。用法：管道字符(|)+过滤器名。

<!DOCTYPE HTML>
<html>
<head>
	<title> 过滤器 </title>
	<meta charset="utf-8">
	<script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
</head>
<body>
  <div ng-app="">
     Input Value: <input type="text" ng-model="test">
    <br/>
     大写形式为: {{ test | uppercase}}
    <br/>
     小写形式为: {{ test | lowercase}}
    <br/>
     Input Money Value: <input type="text" ng-model="test_money">
    <br/>
     货币形式为: {{ test_money | currency}}
    <br/>
  </div>
</body>
</html>


运行结果如下:

Input Value:  
大写形式为: FDSDFDJLJKLSDFSDFEW 
小写形式为: fdsdfdjljklsdfsdfew 
Input Money Value:  
货币形式为: $3,478,787.00 

b.filter过滤器

可以过滤数组并从中选择出一个子集出来，用法是“filter:模型名称”，示例如下：

<span style="font-family:SimSun;font-size:18px;background-color: rgb(255, 255, 255);"><!DOCTYPE HTML>
<html>
<head>
	<title> filter </title>
	<meta charset="utf-8">
	<script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
</head>
<body>
	<div ng-app="" ng-init="fruits = [
                          {kind:'apple',price:5.5},
                          {kind:'banana',price:3.8},
                          {kind:'orange',price:2.5},
                          {kind:'watermelon',price:4.6}]">
    输入选择的<input type="text" ng-model="kind">
      <br/>
    <table>
      <tr ng-repeat="f in fruits | filter:kind">
        <td>{{'Kind:' + f.kind + ', Price:' + f.price}}</td>
      </tr>
    </table>
  
  </div>
</body>
</html></span>
运行结果如下:

输入要过滤的 

Kind:orange, Price:2.5
Kind:watermelon, Price:4.6


chr23899
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angularjs过滤器--filter与ng-repeat配合有奇效
10-20
在介绍AngularJS过滤器-filter与ng-repeat的配合使用时，我们首先需要了解这两个指令在AngularJS框架中所扮演的角色。AngularJS是一个开源的前端框架，由Google支持，广泛用于开发动态Web应用程序。它通过引入双向...
如何在angularjs的自定义指令内部定义自定义过滤器？
Drenched的博客
04-27 845
今天下班碰到之前的小学妹，看她今天很是烦躁，我们就沟通了一下，原来是上学的时候没有学好AngularJS，有很多不懂的问题，她问了我一个问题，就是怎么使用自定义过滤器？ 一听到这个问题，我就有得说了，我就给她写了个案例，基本的使用方法。 其实自定义的过滤器很强大，功能很多，所以我们公司一直有在使用，所以我们团队的人都应该会对它挺了解的，今天就来说说怎么去用它。 1、首先你要很清
详解AngularJS Filter（过滤器）用法
10-23
AngularJS内置了一些常用的过滤器，它们分别是： 1. currency：将数值转换成货币格式。 2. uppercase/lowercase：将字符串转换成大写或小写形式。 3. date：将日期格式化成指定格式。 4. json：将对象或数组格式...
AngularJS变量及过滤器Filter用法分析
10-21
本篇知识点将详细分析AngularJS中变量的使用方法和过滤器Filter的用法，以及如何自定义过滤器。 首先，AngularJS中变量的设置和使用可以通过多种方式实现。在HTML标签中，AngularJS使用指令（如ng-init、ng-model）...
AngularJs:Angular JS指令和过滤器
04-30
**AngularJS：深入理解指令与过滤器** AngularJS，作为一款强大的前端JavaScript框架，由Google维护，主要用于构建动态Web应用。其核心特性包括数据绑定、依赖注入、指令系统以及丰富的过滤器，使得开发者能更高效...
AngularJS基础知识笔记之过滤器
12-13
过滤器是用来更改修改数据，并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。 S.No. 名称 描述 1 大写 转换文本为大写文本。 2 小写 转换文本为小写文本。 3 货币 货币格式格式文本。...
常用芯片手册芯片资料MAX260常用芯片手册芯片资料MAX260
最新发布
08-31
常用芯片手册芯片资料MAX260常用芯片手册芯片资料MAX260提取方式是百度网盘分享地址
常用芯片手册芯片资料82530常用芯片手册芯片资料82530
08-31
常用芯片手册芯片资料82530常用芯片手册芯片资料82530提取方式是百度网盘分享地址
全国互联网网民数和互联网普及率.xlsx
08-31
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/141286857 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理 各省、地级市、区县互联网普及率、宽带接入户数和电话用户数等 1、全国互联网网民数和互联网普及率（1997-2020年）； 2、各省互联网网民数和互联网普及率（1997-2016年）； 3、地级市互联网宽带接入用户（1996-2020年）； 4、各区县电话用户数（2004-2019年）
SQLAlchemy-2.0.30-cp37-cp37m-musllinux_1_1_x86_64.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
百度云/百度网盘Python客户端
08-31
极简说明 安装: pip install bypy 运行: bypy 这是一个百度云/百度网盘的Python客户端。主要的目的就是在Linux环境下（Windows下应该也可用，但没有仔细测试过）通过命令行来使用百度云盘的2TB的巨大空间。比如，你可以用在Raspberry Pi树莓派上。它提供文件列表、下载、上传、比较、向上同步、向下同步，等操作。
2010-2021年省级碳排放和分行业二氧化碳排放数据(全新整理)
08-31
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/141286902 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理 分行业二氧化碳排放量 数据来源：中国能源统计等 时间范围：1994-2021年 指标：八类能源和总量
SQLAlchemy-2.0.31-cp310-cp310-manylinux_2_17_x86_64.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
科技小贴士-美国白宫召开会议讨论开源软件给软件供应链带来的安全隐患(1).docx
08-31
科技小贴士-美国白宫召开会议讨论开源软件给软件供应链带来的安全隐患(1).docx
vite-page-entry-main.zip
08-31
vite-page-entry-main.zip
geopandas-0.13.1-py3-none-any.whl
08-31
GeoPandas是一个开源的Python库，旨在简化地理空间数据的处理和分析。它结合了Pandas和Shapely的能力，为Python用户提供了一个强大而灵活的工具来处理地理空间数据。以下是关于GeoPandas的详细介绍： 一、GeoPandas的基本概念 1. 定义 GeoPandas是建立在Pandas和Shapely之上的一个Python库，用于处理和分析地理空间数据。 它扩展了Pandas的DataFrame和Series数据结构，允许在其中存储和操作地理空间几何图形。 2. 核心数据结构 GeoDataFrame：GeoPandas的核心数据结构，是Pandas DataFrame的扩展。它包含一个或多个列，其中至少一列是几何列（geometry column），用于存储地理空间几何图形（如点、线、多边形等）。 GeoSeries：GeoPandas中的另一个重要数据结构，类似于Pandas的Series，但用于存储几何图形序列。 二、GeoPandas的功能特性 1. 读取和写入多种地理空间数据格式 GeoPandas支持读取和写入多种常见的地理空间数据格式，包括Shapefile、GeoJSON、PostGIS、KML等。这使得用户可以轻松地从各种数据源中加载地理空间数据，并将处理后的数据保存为所需的格式。 2. 地理空间几何图形的创建、编辑和分析 GeoPandas允许用户创建、编辑和分析地理空间几何图形，包括点、线、多边形等。它提供了丰富的空间操作函数，如缓冲区分析、交集、并集、差集等，使得用户可以方便地进行地理空间数据分析。 3. 数据可视化 GeoPandas内置了数据可视化功能，可以绘制地理空间数据的地图。用户可以使用matplotlib等库来进一步定制地图的样式和布局。 4. 空间连接和空间索引 GeoPandas支持空间连接操作，可以将两个GeoDataFrame按照空间关系（如相交、包含等）进行连接。此外，它还支持空间索引，可以提高地理空间数据查询的效率。
SQLAlchemy-2.0.30-cp311-cp311-macosx_11_0_arm64.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
钢结构厂房工程监理全过程工作流程图（44个流程）.rar
08-31
钢结构厂房工程监理全过程工作流程图（44个流程）.rar
SQLAlchemy-2.0.0rc3-cp310-cp310-win32.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
AngularJS验证、过滤器与指令详解
首先，让我们深入了解几个常用的验证指令： 1. **ng-required**: 当一个字段未填写时，用于强制要求输入。例如，`<input type="text" ng-model="username" ng-required="true" />`，如果`username`为空，将会显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值