AngularJS 指令

发布时间：2020-12-17 06:53:55 所属栏目：安全来源：网络整理

导读：AngularJS 通过被称为? 指令 ?的新属性来扩展 HTML。 ? AngularJS 指令是扩展的 HTML 属性，带有前缀? ng- 。 ng-app ?指令初始化一个 AngularJS 应用程序。 ng-init ?指令初始化应用程序数据。 ng-model ?指令把元素值（比如输入域的值）绑定到应用程序。 ?

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

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

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

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

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

示例：

代码：

<!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 指令同步的：

<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 元素：

代码：

<!--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?指令用在一个对象数组上：

代码：

<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 元素。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!