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

最新推荐文章于 2021-06-02 15:26:38 发布

原创最新推荐文章于 2021-06-02 15:26:38 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

angularjs 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了AngularJS中的常用指令（ng-hide、ng-show、ng-repeat）和过滤器（大小写转换、货币格式转换、数组过滤），并通过示例展示了它们的使用方法和效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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