- 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()'
最后編輯于 :
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。