- ng-app 挂载主模块
- ng-bind和 {{}} 等价于 v-text 和 {{}} 其中可以为表达式
- ng-controller 挂载控制器
- ng-init 初始化变量(不常用),格式为ng-init="hello=123;name='你好'",优先度高于js中的设置
- ng-cloak 防止应用加载时的闪烁
- ng-model 等价于 v-model
- ng-repeat 等价于 v-for
- ng-repeat="item in ages track by $index",
如果不加track by $index,则ages数组中有相同项时会报错
- ng-repeat中存在$first,$last等,可以配合ng-if表示循环表中第一个/最后一个是否显示
- ng-src 等价于 :src (都需要用{{ }},但是ng-src会等其中内容有值后再做请求,而src会先作出一次无效的请求,因此ng-src更好)
- ng-include 引入另一html作为模板
- ng-disabled='' 为true时表单控件变为不可用(如ng-disabled='form.$invalid')
- ng-readonly
- ng-hide=''/ng-show='' 类似于v-show
- ng-if='' 类似于v-if
- 注意,ng-if的元素或其子元素标签内的ng-click事件,对其本身ng-if判断条件字段的改变无法生效,此时应用ng-show代替,例如:
<div ng-if="hello">
<div ng-click="hello = false"></div>
</div>
- ng-href 代替a标签的href
- ng-checked 用于设置checkbox或radio,为true时选中。(不同于ng-model,选中不会影响其值,只是单向的影响)
- ng-class 用于给 HTML 元素动态绑定一个或多个 CSS 类,其值可以是字符串,对象,或一个数组。
- 如果是字符串,多个类名使用空格分隔。
- 如果是对象,需要使用 key-value 对,key 为你想要添加的类名,value 是一个布尔值。只有在 value 为 true 时类才会被添加。
- 如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象。
- ng-switch 一系列对应指令
<div ng-switch="myVar">
<div ng-switch-when="runoob">
<h1>菜鸟教程</h1>
<p>欢迎访问菜鸟教程</p>
</div>
<div ng-switch-when="google">
<h1>Google</h1>
<p>欢迎访问Google</p>
</div>
<div ng-switch-when="taobao">
<h1>淘宝</h1>
<p>欢迎访问淘宝</p>
</div>
<div ng-switch-default>
<h1>切换</h1>
<p>选择不同选项显示对应的值。</p>
</div>
</div>
事件
- ng-blur
- ng-focus
- ng-change 不同于onchange,不需要focus到其他元素就能触发
- ng-click ='btnClick()'