您的位置：首页 > Web前端 > AngularJS

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

2016-02-18 10:00 627 查看

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>

运行结果如下:

Change
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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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