Der Unterschied zwischen AngularJs und Angulars häufig verwendeten Methoden zum Schreiben von Anweisungen

Dieser Artikel stellt hauptsächlich den Unterschied zwischen AngularJs und den häufig verwendeten Anweisungen vor. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen.

1: anglejs Die Direktive

1.ng-bind

ersetzt den Inhalt eines HTML-Elements durch den Wert einer bestimmten Variablen oder eines bestimmten Ausdrucks

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

2.ng-blur

Funktion, die ausgeführt werden muss, wenn das HTML-Element den Fokus verliert (<a>, <input>, <select>, <textarea> unterstützt)

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

3.ng-checked/ng-disabled

ng-checked setzt das aktivierte Attribut des Kontrollkästchens (checkbox) oder des Optionsfelds (radio)
ng -disabled-Ausdruck Wenn die Formel „true“ zurückgibt, wird das Formularfeld deaktiviert (<input>, <select> oder <textarea>)

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

//flag为布尔类型

4.ng-class

für das HTML-Element Binden Sie eine oder mehrere CSS-Klassen dynamisch.

//写法一
<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 definiert das Stammelement der Anwendung.

• ng-bind Bindet HTML-Elemente an Anwendungsdaten

• ng-bind-html Bindet innerHTML von HTML-Elementen an Anwendungsdaten und entfernt gefährliche Elemente Zeichen in HTML-Strings

• ng-bind-template gibt den Textinhalt an, der durch Vorlagen ersetzt werden soll

• ng-blur Gibt das Verhalten des an Unschärfeereignis

• ng-change gibt den Ausdruck an, der ausgeführt werden soll, wenn sich der Inhalt ändert

• ng-checked gibt an, ob das Element ausgewählt ist

• ng-class Gibt die von HTML-Elementen verwendete CSS-Klasse an.

• ng-class-even Ähnlich wie ng-class, beginnt jedoch nur in geraden Zeilen Funktion

• ng-class-odd Ähnlich wie ng-class, funktioniert aber nur bei ungeraden Zeilen

• ng-click Definiert, wann das Element ist angeklickt Verhalten von

• ng-cloak Verhindert das Flackern der Anwendung, wenn sie gerade geladen wird

• ng-controller Definiert das Controller-Objekt der Anwendung

• ng-copy Gibt das Verhalten von Kopierereignissen an

• ng-csp Ändert die Sicherheitsrichtlinie des Inhalts

• ng -cut Gibt das Verhalten des Schnittereignisses an

• ng-dblclick Gibt das Verhalten des Doppelklickereignisses an

• ng-disabled Gibt an, ob ein Element deaktiviert ist

• ng-focus Gibt das Verhalten von Fokusereignissen an

• ng-form Gibt das HTML-Formular an das Controller-Formular erben

• ng-hide HTML-Element ausblenden oder anzeigen

• ng-href Geben Sie einen Link für das <a>-Element

• ng-if Wenn die Bedingung falsch ist, entfernen Sie HTML-Elemente

• ng-include binden Sie HTML-Dateien in die Anwendung ein

• ng-init Definieren Sie den Initialisierungswert der Anwendung

• ng-jq definiert die Bibliothek, die die Anwendung verwenden muss, z. B.: jQuery

• ng-keydown gibt das Verhalten von Tastendruckereignissen an

• ng-keypress Gibt das Verhalten des Tastendruckereignisses an

• ng -keyup Gibt das Verhalten des Schlüsselfreigabeereignisses an

• ng-list Text in Liste (Array) konvertieren

• ng-model Binden Sie den Wert von HTML-Controller zu Anwendungsdaten

• ng-model-options gibt an, wie das Modell aktualisiert wird

• ng-mousedown gibt das Verhalten an, wenn die Maus gedrückt wird Taste gedrückt wird

• ng-mouseenter gibt das Verhalten des Mauszeigers beim Durchlaufen des Elements an

• ng-mouseleave Gibt das Verhalten an, wenn der Mauszeiger gedrückt wird verlässt das Element

• ng-mousemove Legt das Verhalten des Mauszeigers fest, wenn er das Element verlässt. Verhalten beim Bewegen innerhalb des Elements

• ng- Mouseover gibt das Verhalten an, wenn sich der Mauszeiger über dem Element befindet

• ng-mouseup gibt an, wann der Mauszeiger auf dem Element losgelassen wird. Verhalten, wenn die Maustaste eingeschaltet wird

• ng-non-bindable Gibt an, dass das Element oder Unterelement keine Daten binden kann

• ng-open gibt das Element-Open-Attribut an

• ng-options gibt

  <select><options>

ng-paste in der
• -Liste an, um das Verhalten des Einfügeereignisses festzulegen

• ng-pluralize Informationen gemäß den Lokalisierungsregeln anzeigen

• ng-readonly Geben Sie das schreibgeschützte Attribut des Elements an

• ng-repeat Definieren die Vorlage für alle Daten in der Sammlung

• ng-selected Geben Sie das ausgewählte Attribut des Elements an

• ng-show HTML-Element anzeigen oder ausblenden

• ng-src Gibt das src-Attribut des -Elements an.

• ng-srcset Gibt das srcset-Attribut des -Elements an ; 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 前台分页实现

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen AngularJs und Angulars häufig verwendeten Methoden zum Schreiben von Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!