AngularJs基本篇 三(常用指令+过滤器)
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>
运行结果如下:
Changeshow_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 |