angular 笔记（一） 常用指令

angular 笔记

常用指令

1.ng-app

    初始化一个angularJS 应用 ，当前这个元素是根元素,HTML文档中只能有一个根元素。modulename ：应用模块的名称，可选。

<element ng-app="modulename">
...
 在 ng-app 根元素上的内容可以包含 AngularJS 代码
...
</element>

2.ng-model

    数据绑定（双向），绑定HTML 表单元素到 scope 变量中，如果变量不存在，则创建变量。支持HTML标签input/textarea/select。ng-model 指令可以为应用数据提供状态值:

状态	说明
valid	验证通过
dirty	控件输入值已变更
touched	控件已失去焦点
pristine	用户是否修改了表单(true没有修改)

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
    Email:
    <input type="email" name="myAddress" ng-model="myText" required></p>
    <h1>状态</h1>
    {{myForm.myAddress.$valid}}
    {{myForm.myAddress.$dirty}}
    {{myForm.myAddress.$touched}}
</form>

 3.ng-bind

   数据绑定（单向），支持所有HTML标签

4.ng-if / ng-hide

    ng-if 添加(true)、移除(false)html标签; ng-hide 显示(false),隐藏(true) html标签。支持所有html标签。

5.ng-repeat

   循环输出HTML 元素    

<!--例1 arrs=['2016','2017','2018']; 用li 输出 arrs 元素 -->

<ul>
    <li ng-repeat="item in arrs">{{item}}</li>
</ul>

 

   

6.AngularJS事件类指令

    常用的有：

• ng-click  点击
• ng-dbl-click 双击
• ng-mousedown 鼠标按下按键时
• ng-mouseenter 鼠标进入
• ng-mouseleave 鼠标离开
• ng-mousemove 鼠标移动
• ng-keydown 按下键盘
• ng-keyup  弹起键盘
• ng-keypress 按了键盘（按下松开）
• ng-change  属性改变 

<button ng-click="count = count + 1;" ng-init="count=0">OK</button>

7.表达式 

   AngularJS 表达式写在双大括号内：{{ expression }}。 

 

下一篇