這篇文章主要介紹了關於AngularJs與Angular 常用的指令寫法的區別，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下 ##一：angularjs指令 1.ng-bind使用給定的變數或表達式的值來取代HTML 元素的內容 登入後複製 2.ng-blurHTML 元素在失去焦點時需要執行的函數（, , , <code>支援）</code></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><input ng-blur="pay()" /></pre><div class="contentsignin">登入後複製</div></div> <p>3.ng-checked/ng-disabled<strong></strong></p> #ng-checked設定複選框(checkbox)或單選按鈕(radio)的checked 屬性<p> ng-disabled表達式傳回true 則表單欄位將會停用(<br><input><code>, </code><select><code>, 或</code><textarea><code>)</code></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><input type="checkbox|radio" ng-checked="flag" ng-disabled="flag"></input> //flag为布尔类型</pre><div class="contentsignin">登入後複製</div></div> <p>4.ng-class<strong></strong></p>給HTML 元素動態綁定一個或多個CSS 類別。 <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>//写法一 <p ng-class="home"></p> //写法二 <p ng-class="{'red':flag,'green':'!flag'}"></p> //flag为true则添加red类名，false则添加green类名</pre><div class="contentsignin">登入後複製</div></div> <p>5.ng-click<strong></strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><button ng-click="addpay($event)">OK</button> //$event为当前元素的多种属性</pre><div class="contentsignin">登入後複製</div></div> <p>#6.ng-repeat<strong></strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><p ng-repeat="(index,item) in list"></p> // 每项值：{{item}} // 下标：{{index}}</pre><div class="contentsignin">登入後複製</div></div> <ul class=" list-paddingleft-2"> <li>ng -app 定義應用程式的根元素。 <p></p> </li> <li>ng-bind 綁定HTML 元素到應用程式資料<p></p> </li> <li>ng-bind-html 綁定HTML 元素的innerHTML 到應用程式資料，並移除HTML 字串中危險字元<p></p> </li> <li>ng-bind-template 規定要使用範本取代的文字內容<p></p> </li> <li>ng-blur規定blur 事件的行為<p></p> </li> <li>ng-change 規定在內容改變時要執行的表達式<p></p> </li>##ng-checked 規定元素是否被選中<li><p></p></li>ng-class 指定HTML 元素使用的CSS 類別<li><p></p></li>ng-class-even 類似ng-class，但只在偶數行起作用<li><p></p></li>ng-class-odd 類似ng-class，但只在奇數行起作用<li> <p></p>##ng-click 定義元素被點擊時的行為</li> <li> <p></p>ng-cloak 在應用正要載入時防止其閃爍</li> <li> <p></p>ng-controller 定義應用的控制器物件</li> <li> <p></p>ng-copy 規定拷貝事件的行為</li> <li> <p></p>#ng-csp 修改內容的安全策略</li> <li> <p></p>#ng -cut 規定剪切事件的行為</li> <li> <p></p>ng-dblclick 規定雙擊事件的行為</li> <li> <p></p>ng-disabled 規定一個元素是否已停用</li> <li> <p></p>ng-focus 規定聚焦事件的行為</li> <li> <p></p>#ng-form 指定HTML 表單繼承控制器表單</li> <li> <p></p>#ng-hide 隱藏或顯示HTML 元素</li> <li> <p></p>#ng-href 為the </li><a><li># 元素指定連結<p><code></code></p> </li> <li>#<a><p> 元素指定連結</p> </li> <li><p></p></li> <li>ng-if 如果條件為false 移除HTML 元素<p></p> </li> <li>ng-include 在應用程式中包含HTML 檔案<p></p> </li> <li>#ng-init定義應用的初始化值<p></p> </li> <li>ng-jq 定義應用程式必須使用到的函式庫，如：jQuery<p></p> </li> <li>ng-keydown 規定按下按鍵事件的行為<p></p> </li> <li>ng-keypress 規定按下按鍵事件的行為<p></p> </li> <li>ng-keyup 規定鬆開按鍵事件的行為<p> </p> </li> <li>ng-list 將文字轉換為清單(陣列)<p></p> </li> <li>ng-model 綁定HTML 控制器的值到應用資料<p></p> </li> <li>ng-model-options 規定如何更新模型<p></p> </li> <li>#ng-mousedown 規定按下滑鼠按鍵時的行為<p></p> </li> <li> #ng-mouseenter 規定滑鼠指標穿過元素時的行為<p></p> </li> <li>ng-mouseleave 規定滑鼠指標離開元素時的行為<p></p> </li> <li>#ng- mousemove 規定滑鼠指標在指定的元素中移動時的行為<p></p> </li> <li>#ng-mouseover 規定滑鼠指標位於元素上方時的行為<p></p> </li> <li>ng-<p></p>ng-</li> <li>ng-<p><code>ng-</code><code>ng-</code></p>ng-</li> <li>ng-<p></p>ng-</li> <li>ng-<p></p>ng-</li> <li>ng-<p></p> mouseup 規定當在元素上放開滑鼠按鈕時的行為</li> <li> <p></p>ng-non-bindable 規定元素或子元素不能綁定資料</li> <li> <p></p> #ng-open 指定元素的open 屬性</li> <li> <p></p>ng-options 在</li><select><li> 清單中指定<p><options></p> </li> <li> <p></p>#ng-paste 規定貼上事件的行為############ng-pluralize 依照本地化規則顯示訊息############ #ng-readonly 指定元素的readonly 屬性############ng-repeat 定義集合中每項資料的範本############ng-selected 指定元素的範本#############ng-selected 指定元素的selected 屬性############ng-show 顯示或隱藏HTML 元素############ng-src 指定<img> 元素的src 屬性##### ########ng-srcset 指定<img> 元素的srcset 屬性###</li> <li><p>ng-style 指定元素的 style 属性</p></li> <li><p>ng-submit 规定 onsubmit 事件发生时执行的表达式</p></li> <li><p>ng-switch 规定显示或隐藏子元素的条件</p></li> <li><p>ng-transclude 规定填充的目标位置</p></li> <li><p>ng-value 规定 input 元素的值</p></li> </ul> <p>详情参考：http://www.runoob.com/angular...</p> <blockquote><strong>二：angular指令</strong></blockquote> <p>imageUrl 属性：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><img [src]="imageUrl"></pre><div class="contentsignin">登入後複製</div></div> <p>[disabled]当组件为 isUnchanged( 未改变 ) 时禁用一个按钮：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><button [disabled]="isUnchanged">按钮是禁用的</button></pre><div class="contentsignin">登入後複製</div></div> <p>设置指令的属性：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><p [ngClass]="classes">[ngClass]绑定到classes 属性</p></pre><div class="contentsignin">登入後複製</div></div> <p>表格的colspan/rowspan</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><table border=1> <tr><td [attr.colspan]="1 + 1">One-Two</td></tr> <tr><td>Five</td><td>Six</td></tr> </table></pre><div class="contentsignin">登入後複製</div></div> <p>[(NgModel)]</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><input [(ngModel)]="currentUser.firstName"></pre><div class="contentsignin">登入後複製</div></div> <p>NgIf</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><p *ngIf="currentUser">Hello,{{currentUser.firstName}}</p></pre><div class="contentsignin">登入後複製</div></div> <p>NgFor</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><p *ngFor="let user of users; let i=index">{{i + 1}} - {{user.fullName}}</p></pre><div class="contentsignin">登入後複製</div></div> <p>（click）</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><button type="submit" class="btn btn-primary" (click)="hide()">确定</button></pre><div class="contentsignin">登入後複製</div></div> <p>[(checked)]</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><input type="checkbox" [(checked)]="checkflag"></pre><div class="contentsignin">登入後複製</div></div> <ul class=" list-paddingleft-2"> <li> <p>common</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre> NgClass NgComponentOutlet NgForOf NgIf NgPlural NgPluralCase NgStyle NgSwitch NgSwitchCase NgSwitchDefault NgTemplateOutlet</pre><div class="contentsignin">登入後複製</div></div> </li> <li> <p>forms</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre> CheckboxControlValueAccessor CheckboxRequiredValidator DefaultValueAccessor EmailValidator FormArrayName FormControlDirective FormControlName FormGroupDirective FormGroupName MaxLengthValidator MinLengthValidator NgControlStatus NgControlStatusGroup NgForm NgModel NgModelGroup NgSelectOption PatternValidator RadioControlValueAccessor RequiredValidator SelectControlValueAccessor SelectMultipleControlValueAccessor</pre><div class="contentsignin">登入後複製</div></div> </li> <li> <p>router</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre> RouterLink RouterLinkActive RouterLinkWithHref RouterOutlet</pre><div class="contentsignin">登入後複製</div></div> </li> </ul> <p>详情参考：https://angular.io/api/</p> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！</p> <p>相关推荐：</p> <p class="comments-box-content"><a title="Jquery以及AngularJS中Get/Post的传参" href="http://www.php.cn/js-tutorial-406299.html" target="_blank">Jquery以及AngularJS中Get/Post的传参</a><br></p> <p class="mt20 ad-detail-mm hidden-xs"><a title="AngularJS 前台分页实现" href="http://www.php.cn/js-tutorial-406298.html" target="_blank">AngularJS 前台分页实现</a><br></p>
