zoukankan      html  css  js  c++  java
  • 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的学习、理解和记忆。

  • 相关阅读:
    使用汇编语言编写注入代码
    代码注入
    DLL卸载
    DLL注入
    nginx图片防盗链
    apache字体文件跨域、路由去掉index.php
    windows下访问虚拟机中配置的虚拟主机
    deepin docker 安装
    Deepin 配置ssh
    下拉框多选
  • 原文地址:https://www.cnblogs.com/professional-NET/p/4987186.html
Copyright © 2011-2022 走看看