Angular指令

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

推薦閱讀更多精彩內容

  • 創建模塊 <> 關于指令 以ng開頭的就是指令其實指令就是給html標簽添加了一些屬性這些屬性對html并沒有任何...
    曾_0f37閱讀 329評論 0 0
  • 1.指令是什么 第一:指令就是DOM元素的標記(如屬性、元素名、注釋或CSS類名)第二:讓編譯器(compiler...
    梧桐葉_閱讀 1,074評論 1 4
  • HTML在構建應用(App)時存在諸多不足之處,AngularJS通過擴展一系列的HTML屬性或標簽來彌補這些缺陷...
    codeTao閱讀 345評論 0 0
  • AngularJS 通過被稱為 指令 的新屬性來擴展 HTML。 AngularJS 通過內置的指令來為應用添加功...
    frankisbaby閱讀 163評論 0 0
  • 看著我的眼睛說你愛我
    程安安閱讀 150評論 0 1