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>

运行结果如下: 

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值