The difference between AngularJs and Angular’s ​​commonly used instruction writing methods

This article mainly introduces the difference between AngularJs and Angular commonly used instructions. It has a certain reference value. Now I share it with you. Friends in need can refer to it

1: angularjs Directive

1.ng-bind

Replace the content of an HTML element with the value of a given variable or expression

<p ng-bind="{{text}}"></p>

2.ng-blur

Function that needs to be executed when the HTML element loses focus (<a>, <input>, <select>, <textarea>supported)

<input ng-blur="pay()" />

3.ng-checked/ng-disabled

ng-checked sets the checked attribute of the checkbox or radio button
If the ng-disabled expression returns true, the form field will be disabled (<input>, <select>, or <textarea>)

<input type="checkbox|radio" ng-checked="flag" ng-disabled="flag"></input>

//flag为布尔类型

4.ng-class

Give HTML elements dynamic Bind one or more CSS classes.

//写法一
<p ng-class="home"></p>

//写法二
<p ng-class="{&#39;red&#39;:flag,&#39;green&#39;:&#39;!flag&#39;}"></p>
//flag为true则添加red类名，false则添加green类名

5.ng-click

<button ng-click="addpay($event)">OK</button>
//$event为当前元素的多种属性

6.ng-repeat

<p ng-repeat="(index,item) in list"></p>
// 每项值：{{item}}
// 下标：{{index}}

• ng -app defines the root element of the application.

• ng-bind Binds HTML elements to application data

• ng-bind-html Binds innerHTML of HTML elements to application data , and remove dangerous characters in HTML strings

• ng-bind-template Specifies the text content to be replaced with a template

• ng-blur Specifies the behavior of the blur event

• ng-change Specifies the expression to be executed when the content changes

• ng-checked Specifies whether the element is selected

• ng-class Specifies the CSS class used by HTML elements

• ng-class-even Similar to ng-class, but only starts on even lines Function

• ng-class-odd Similar to ng-class, but only works in odd rows

• ng-click Defines when the element is clicked Behavior

• ng-cloak Prevents the application from flickering when it is about to load

• ng-controller Defines the application's controller object

• ng-copy Specifies the behavior of copy events

• ng-csp Modifies the security policy of content

• ng -cut Specifies the behavior of the cut event

• ##ng-dblclick Specifies the behavior of the double-click event

• ng-disabled Specifies whether an element is disabled

• ng-focus Specifies the behavior of focus events

• ng-form Specifies the HTML form to inherit the controller form

• ng-hide Hide or show HTML elements

• ng-href Specify links for the

  <a> elements

• ng-if If the condition is false, remove the HTML element

• ng-include Include the HTML file in the application

• ng-init Define the initialization value of the application

• ng-jq Define the library that the application must use, such as: jQuery

##ng-keydown Specify the key to press Event behavior
ng-keypress Specifies the behavior of the key press event
ng-keyup Specifies the behavior of the key release event
ng-list Convert text to list (array)

• ##ng-model Bind the value of HTML controller to application data

• ng-model-options Specifies how to update the model

• ng-mousedown Specifies the behavior when the mouse button is pressed

• ng-mouseenter Specifies the behavior when the mouse pointer passes through the element

• ng-mouseleave Specifies the behavior when the mouse pointer leaves the element

• ng- mousemove Specifies the behavior of the mouse pointer when moving within the specified element

• ##ng-mouseover Specifies the behavior of the mouse pointer when it is located above the element

• ng- mouseup specifies the behavior when the mouse button is released on the element

• ng-non-bindable specifies that the element or sub-element cannot bind data

• ng-open Specify the open attribute of the element

• ng-options Specify

## in the
• <select>

  list #ng-paste Specifies the behavior of paste events

• ng-pluralize Displays information according to localization rules

• ng-readonly Specifies the readonly attribute of the element

• ng-repeat Defines the template for each data in the collection

• ng-selected Specifies the element's selected attribute

• ng-show Show or hide the HTML element

• ng-src Specify the src attribute of the element

• ng-srcset Specifies the srcset attribute of the element

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

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

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

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

• ng-value    规定 input 元素的值

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

二：angular指令

imageUrl 属性：

<img [src]="imageUrl">

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

<button [disabled]="isUnchanged">按钮是禁用的</button>

设置指令的属性：

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

表格的colspan/rowspan

<table border=1>
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
</table>

[(NgModel)]

<input [(ngModel)]="currentUser.firstName">

NgIf

<p *ngIf="currentUser">Hello,{{currentUser.firstName}}</p>

NgFor

<p *ngFor="let user of users; let i=index">{{i + 1}} - {{user.fullName}}</p>

（click）

<button type="submit" class="btn btn-primary" (click)="hide()">确定</button>

[(checked)]

<input type="checkbox"  [(checked)]="checkflag">

• 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 前台分页实现

The above is the detailed content of The difference between AngularJs and Angular’s ​​commonly used instruction writing methods. For more information, please follow other related articles on the PHP Chinese website!