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

 

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