AngularJs與Angular 常用的指令寫法的區別

這篇文章主要介紹了關於AngularJs與Angular 常用的指令寫法的區別，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

##一：angularjs指令

1.ng-bind

使用給定的變數或表達式的值來取代HTML 元素的內容<p></p>

<p></p>

2.ng-blur

HTML 元素在失去焦點時需要執行的函數（

, <input>, , <code>支援）</code><pre class="brush:php;toolbar:false"><input></pre>

3.ng-checked/ng-disabled

#ng-checked設定複選框(checkbox)或單選按鈕(radio)的checked 屬性

ng-disabled表達式傳回true 則表單欄位將會停用(
<input>, , 或<code>)</code><pre class="brush:php;toolbar:false"><input> //flag为布尔类型</pre>

4.ng-class

給HTML 元素動態綁定一個或多個CSS 類別。 <p></p>

//写法一
<p></p>

//写法二
<p></p>
//flag为true则添加red类名，false则添加green类名

5.ng-click

<button>OK</button>
//$event为当前元素的多种属性

#6.ng-repeat

<p></p>
// 每项值：{{item}}
// 下标：{{index}}

• ng -app    定義應用程式的根元素。 <p></p>
• ng-bind    綁定HTML 元素到應用程式資料<p></p>
• ng-bind-html    綁定HTML 元素的innerHTML 到應用程式資料，並移除HTML 字串中危險字元<p></p>
• ng-bind-template    規定要使用範本取代的文字內容<p></p>
• ng-blur規定blur 事件的行為<p></p>
• ng-change    規定在內容改變時要執行的表達式<p></p>
##ng-checked    規定元素是否被選中
• <p></p>
ng-class    指定HTML 元素使用的CSS 類別
• <p></p>
ng-class-even    類似ng-class，但只在偶數行起作用
• <p></p>
ng-class-odd    類似ng-class，但只在奇數行起作用
• <p></p>##ng-click    定義元素被點擊時的行為
• <p></p>ng-cloak    在應用正要載入時防止其閃爍
• <p></p>ng-controller    定義應用的控制器物件
• <p></p>ng-copy    規定拷貝事件的行為
• <p></p>#ng-csp    修改內容的安全策略
• <p></p>#ng -cut    規定剪切事件的行為
• <p></p>ng-dblclick    規定雙擊事件的行為
• <p></p>ng-disabled    規定一個元素是否已停用
• <p></p>ng-focus    規定聚焦事件的行為
• <p></p>#ng-form    指定HTML 表單繼承控制器表單
• <p></p>#ng-hide    隱藏或顯示HTML 元素
• <p></p>#ng-href    為the
• # 元素指定連結

• #

  元素指定連結

• <p></p>
• ng-if    如果條件為false 移除HTML 元素<p></p>
• ng-include    在應用程式中包含HTML 檔案<p></p>
• #ng-init定義應用的初始化值<p></p>
• ng-jq    定義應用程式必須使用到的函式庫，如：jQuery<p></p>
• ng-keydown    規定按下按鍵事件的行為<p></p>
• ng-keypress    規定按下按鍵事件的行為<p></p>
• ng-keyup    規定鬆開按鍵事件的行為

• ng-list    將文字轉換為清單(陣列)<p></p>
• ng-model    綁定HTML 控制器的值到應用資料<p></p>
• ng-model-options    規定如何更新模型<p></p>
• #ng-mousedown    規定按下滑鼠按鍵時的行為<p></p>
• #ng-mouseenter    規定滑鼠指標穿過元素時的行為<p></p>
• ng-mouseleave    規定滑鼠指標離開元素時的行為<p></p>
• #ng- mousemove    規定滑鼠指標在指定的元素中移動時的行為<p></p>
• #ng-mouseover    規定滑鼠指標位於元素上方時的行為<p></p>
• ng-<p></p>ng-
• ng-

  ng-ng-

  ng-
• ng-<p></p>ng-
• ng-<p></p>ng-
• ng-<p></p> mouseup    規定當在元素上放開滑鼠按鈕時的行為
• <p></p>ng-non-bindable    規定元素或子元素不能綁定資料
• <p></p> #ng-open    指定元素的open 屬性
• <p></p>ng-options    在
• 清單中指定

• <p></p>#ng-paste    規定貼上事件的行為############ng-pluralize    依照本地化規則顯示訊息############ #ng-readonly    指定元素的readonly 屬性############ng-repeat    定義集合中每項資料的範本############ng-selected    指定元素的範本#############ng-selected    指定元素的selected 屬性############ng-show    顯示或隱藏HTML 元素############ng-src    指定<img alt="AngularJs與Angular 常用的指令寫法的區別" > 元素的src 屬性##### ########ng-srcset    指定<img alt="AngularJs與Angular 常用的指令寫法的區別" > 元素的srcset 屬性###

• ng-style    指定元素的 style 属性

• ng-submit    规定 onsubmit 事件发生时执行的表达式

• ng-switch    规定显示或隐藏子元素的条件

• ng-transclude    规定填充的目标位置

• ng-value    规定 input 元素的值

详情参考：http://www.runoob.com/angular...

二：angular指令

imageUrl 属性：

<img  alt="AngularJs與Angular 常用的指令寫法的區別" >

[disabled]当组件为 isUnchanged( 未改变 ) 时禁用一个按钮：

<button>按钮是禁用的</button>

设置指令的属性：

<p>[ngClass]绑定到classes 属性</p>

表格的colspan/rowspan

     

One-Two
Five	Six

[(NgModel)]

<input>

NgIf

<p>Hello,{{currentUser.firstName}}</p>

NgFor

<p>{{i + 1}} - {{user.fullName}}</p>

（click）

<button>确定</button>

[(checked)]

<input>

• common

      NgClass
      NgComponentOutlet
      NgForOf
      NgIf
      NgPlural
      NgPluralCase
      NgStyle
      NgSwitch
      NgSwitchCase
      NgSwitchDefault
      NgTemplateOutlet

• forms

      CheckboxControlValueAccessor
      CheckboxRequiredValidator
      DefaultValueAccessor
      EmailValidator
      FormArrayName
      FormControlDirective
      FormControlName
      FormGroupDirective
      FormGroupName
      MaxLengthValidator
      MinLengthValidator
      NgControlStatus
      NgControlStatusGroup
      NgForm
      NgModel
      NgModelGroup
      NgSelectOption
      PatternValidator
      RadioControlValueAccessor
      RequiredValidator
      SelectControlValueAccessor
      SelectMultipleControlValueAccessor

• router

      RouterLink
      RouterLinkActive
      RouterLinkWithHref
      RouterOutlet

详情参考：https://angular.io/api/

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

Jquery以及AngularJS中Get/Post的传参

AngularJS 前台分页实现

以上是AngularJs與Angular 常用的指令寫法的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！