AngularJS 指令

AngularJS 通过被称为指令的新属性来扩展 HTML。

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

示例：

AngularJS 指令

代码：

<!DOCTYPE html>
<html ng-app="">
    <head>
        <meta charset="UTF-8">
        <title>AngularJS的指令</title>
        <script type="text/javascript" src="js/angular.min.js" ></script>
    </head>
    <body>
        <div ng-init="Name='John'">
            <p>请在输入框中输入：</p>
            <p>姓名:<input type="text" ng-model="Name"/></p>
            <p>你输入的姓名是：{{Name}}</p>
            
            
            
        </div>
        
    </body>
</html>

数据绑定

上面的例子中的 {{ Name }} 表达式是一个 AngularJS 数据绑定表达式。AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。{{ Name }} 是通过 ng-model="Name" 进行同步。

在下面的这个示例中，，两个文本域是通过两个 ng-model 指令同步的：

AngularJS 指令

<div data-ng-init="quantity=1;price=5">
            总的数量：<input type="number" ng-model="quantity" /><br />
            价格：<input type="number" ng-model="price" />
            <p><b>总价：</b>{{quantity*price}}</p>
            
            
            
        </div>

重复 HTML 元素

ng-repeat 指令会重复一个 HTML 元素：

AngularJS 指令

代码：

<!--ng-repeat 指令会重复一个 HTML 元素：-->
        <div ng-init="Names=['perfect','Bob','lucy','cidy','keli']">
            <p>ng-repeat 来循环一个数组</p>
            <ol>
               <li ng-repeat="x in Names">
               {{x}}
               </li>
                
            </ol>
            
            </div>

当ng-repeat 指令用在一个对象数组上：

AngularJS 指令

代码：

<div ng-init="message=[{name:'perfect',address:'fujian'},{name:'Bob',address:'beijin'},{name:'lucy',address:'guizhou'},{name:'cidy',address:'hunan'}]">
            <p>ng-repeat 用在一个对象数组</p>
            <ol>
               <li ng-repeat="x in message">
               {{'名字：'+x.name+'  '+'地址：'+x.address}}
               </li>
                
            </ol>
            
            
            
            
            
            
            
        </div>

总结：

ng-app 指令：

1、定义了 AngularJS 应用程序的根元素。

2、在网页加载完毕时会自动引导（自动初始化）应用程序。

ng-init 指令：

ng-init 指令为 AngularJS 应用程序定义了初始值。

通常情况下，不使用 ng-init。可以使用一个控制器或模块来代替它。

ng-model 指令：

1、ng-model 指令绑定 HTML 元素到应用程序数据。

2、ng-model 指令也可以：

为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

ng-repeat 指令：

ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。

数据绑定

重复 HTML 元素

ng-app 指令：

ng-init 指令：

ng-model 指令：

ng-repeat 指令：

相关推荐