AngularJS指令

标签：

AngularJS指令

通过指令的心属性来扩展HTML。

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

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

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

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

<div ng-app="" ng-init="name=‘hello world‘">

     <div><input type="text" ng-model="name"></div>

     <div>你输入的为：{{name}}</div>

</div>

*单个页面中可以包含多个AngularJS应用程序。

AngularJS中的数据绑定同步了AngularJS表达式和AngularJS数据。

即{{name}} 是通过ng-model="name"进行同步

 数据绑定

以下是通过2个ng-model来同步的实例：

<div ng-app="" ng-init="quantity=5;price=3">

     数量：<input type="number" ng-model="quantity">

     价格：<input type="number" ng-model="price">

     <div>总价：{{quantity*price}}</div>

</div>

重复HTMl元素:ng-repeat指令实例

<div ng-app="" ng-init="names=[‘tom‘,‘jeeny‘,‘mary‘]"></div>

  <ul>

       <li ng-repeat="x in names">

              {{ x }}

      </li>

 </ul>

</div>

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

<div ng-app="" ng-init="names=[

                    {name:‘tom‘,age=23},

                    {name:‘mary‘,age=24},

                    {name:‘jeeny‘,age=18}

                      ]">

          循环结果：

<ul>

    <li ng-repeat="x in names">

          {{x.name+‘,‘+x.age}}

   </li>

</ul>

</div>

指令的作用

*Angular支持数据库的crud即增删查改。

ng-app指令定义了AngularJS应用程序的根元素，网页加载完成会自动引导即自动初始化应用程序

ng-init指令为AngularJS应用程序定义了初始值，同常不用。而是用控制器或者模块代替。

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

为应用程序数据提供类型验证（number email required）

为应用程序数据提供状态（invalid dirty touched error）

为HTML元素提供css类

绑定HTML元素到HTMl表单

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

摘录自runoob.com。旨在通过自己的语言加深对AngularJS的学习、理解和记忆。

AngularJS指令

标签：

原文地址：http://www.cnblogs.com/professional-NET/p/4987186.html