La différence entre AngularJs et les méthodes d'écriture d'instructions couramment utilisées par Angular

Cet article présente principalement la différence entre les instructions couramment utilisées d'AngularJs et d'Angular. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

1 : angulairejs La directive

1.ng-bind

remplace le contenu de l'élément HTML

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

2.ng-blur

Fonction qui doit être exécutée lorsque l'élément HTML perd le focus (

, <a>, <input>, <select> pris en charge)<textarea>

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

3.ng-checked/ng-disabled

ng-checked définit l'attribut coché de la case à cocher (case à cocher) ou du bouton radio (radio )

Si l'expression ng-disabled renvoie vrai, le champ du formulaire sera désactivé (
, <input> ou <select>)<textarea>

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

//flag为布尔类型

4.ng-class

Liez dynamiquement une ou plusieurs classes CSS à des éléments HTML.

//写法一
<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-clic

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

6.ng-répéter

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

• ng-app Définit l'élément racine de l'application.

• ng-bind Lie les éléments HTML aux données d'application

• ng-bind-html Lie le HTML interne des éléments HTML aux données d'application et supprime les éléments dangereux caractères dans les chaînes HTML

• ng-bind-template spécifie le contenu du texte à remplacer par des modèles

• ng-blur Spécifie le comportement du événement flou

• ng-change spécifie l'expression à exécuter lorsque le contenu change

• ng-checked précise si l'élément est sélectionné

• ng-class Spécifie la classe CSS utilisée par les éléments HTML

• ng-class-even Semblable à ng-class, mais ne commence que sur les lignes paires Fonction

• ng-class-odd Similaire à ng-class, mais ne fonctionne que sur les lignes impaires

• ng-click Définit quand l'élément est cliqué Comportement de

• ng-cloak Empêche l'application de scintiller lorsqu'elle est sur le point de se charger

• ng-controller Définit l'objet contrôleur de l'application

• ng-copy Spécifie le comportement des événements de copie

• ng-csp Modifie la politique de sécurité du contenu

• ng -cut Spécifie le comportement de l'événement cut

• ng-dblclick Spécifie le comportement de l'événement double-clic

• ng-disabled Spécifie si un élément est désactivé

• ng-focus Spécifie le comportement des événements de focus

• ng-form Spécifie le formulaire HTML à hériter du formulaire du contrôleur

• ng-hide Masquer ou afficher l'élément HTML

• ng-href Spécifier un lien pour l'élément

  <a>

• ng-if Si la condition est fausse Supprimer les éléments HTML

• ng-include Inclure les fichiers HTML dans l'application

• ng-init Définir la valeur d'initialisation de l'application

• ng-jq définit la bibliothèque que l'application doit utiliser, telle que : jQuery

• ng-keydown spécifie le comportement des événements de pression sur une touche

• ng-keypress Spécifie le comportement de l'événement de pression sur une touche

• ng -keyup Spécifie le comportement de l'événement de libération de clé

• ng-list Convertir le texte en liste (tableau)

• ng-model Lier la valeur du contrôleur HTML aux données d'application

• ng-model-options spécifie comment mettre à jour le modèle

• ng-mousedown spécifie le comportement lorsque la souris le bouton est enfoncé

• ng-mouseenter spécifie le comportement du pointeur de la souris lors du passage à travers l'élément

• ng-mouseleave Spécifie le comportement lorsque le pointeur de la souris quitte l'élément

• ng-mousemove Spécifie le comportement du pointeur de la souris lorsqu'il quitte l'élément Comportement lors d'un déplacement dans l'élément

• ng- mouseover spécifie le comportement lorsque le pointeur de la souris est sur l'élément

• ng-mouseup spécifie quand le pointeur de la souris est relâché sur l'élément Comportement lorsque le bouton de la souris est activé

• ng-non-bindable Spécifie que l'élément ou le sous-élément ne peut pas lier de données

• ng-open spécifie l'attribut ouvert de l'élément

• ng-options spécifie

  <select><options>

ng-paste dans la liste
• pour spécifier le comportement de l'événement coller

• ng-pluralize Afficher les informations selon les règles de localisation

• ng-readonly Spécifier l'attribut en lecture seule de l'élément

• ng-repeat Définir le modèle pour chaque donnée de la collection

• ng-selected Spécifiez l'attribut sélectionné de l'élément

• ng-show Afficher ou masquer l'élément HTML

• ng-src Spécifie l'attribut src de l'élément

• ng-srcset Spécifie l'attribut srcset de l'élément ; élément

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!