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></p>

2.ng-blur

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

<input>

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></select>, or <textarea></textarea>)

<input>

//flag为布尔类型

4.ng-class

Give HTML elements dynamic Bind one or more CSS classes.

//写法一
<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 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<p></p>
• ng-disabled Specifies whether an element is disabled<p></p>
• ng-focus Specifies the behavior of focus events<p></p>
• ng-form Specifies the HTML form to inherit the controller form<p></p>
• ng-hide Hide or show HTML elements<p></p>
• ng-href Specify links for the

  elements

• ng-if If the condition is false, remove the HTML element<p></p>
• ng-include Include the HTML file in the application<p></p>
• ng-init Define the initialization value of the application <p></p>
• ng-jq Define the library that the application must use, such as: jQuery<p></p>
##ng-keydown Specify the key to press Event behavior
• <p></p>
ng-keypress Specifies the behavior of the key press event
• <p></p>
ng-keyup Specifies the behavior of the key release event
• <p></p>
ng-list Convert text to list (array)
• <p></p>##ng-model Bind the value of HTML controller to application data
• <p></p>ng-model-options Specifies how to update the model
• <p></p>ng-mousedown Specifies the behavior when the mouse button is pressed
• <p></p>ng-mouseenter Specifies the behavior when the mouse pointer passes through the element
• <p></p>ng-mouseleave Specifies the behavior when the mouse pointer leaves the element
• <p></p>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

• list #ng-paste Specifies the behavior of paste events

• ng-pluralize Displays information according to localization rules<p></p>
• ng-readonly Specifies the readonly attribute of the element<p></p>
• ng-repeat Defines the template for each data in the collection<p></p>
• ng-selected Specifies the element's selected attribute<p></p>
• ng-show Show or hide the HTML element<p></p>
• ng-src Specify the src attribute of the <img alt="The difference between AngularJs and Angular's ​​commonly used instruction writing methods" > element<p></p>
• ng-srcset Specifies the srcset attribute of the <img alt="The difference between AngularJs and Angular's ​​commonly used instruction writing methods" > element<p></p>

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

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

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

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

• ng-value    规定 input 元素的值

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

二：angular指令

imageUrl 属性：

<img  alt="The difference between AngularJs and Angular's ​​commonly used instruction writing methods" >

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

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!