Maison  >  Article  >  interface Web  >  La différence entre AngularJs et les méthodes d'écriture d'instructions couramment utilisées par Angular

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

不言
不言original
2018-07-09 16:21:111380parcourir

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的传参

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn