Maison > interface Web > js tutoriel > Huit fonctionnalités d'AngularJS que les gens ne peuvent pas lâcher_AngularJS

Huit fonctionnalités d'AngularJS que les gens ne peuvent pas lâcher_AngularJS

WBOY
Libérer: 2016-05-16 15:08:16
original
1507 Les gens l'ont consulté

Huit fonctionnalités d'AngularJS que les gens ne peuvent pas supprimer sont partagées avec vous pour votre référence. Les détails sont les suivants

Première Tag de sortie itérative ng-repeat

ng-repeat combine parfaitement la table ul ol et d'autres balises avec des tableaux en js

<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>
Copier après la connexion

Vous pouvez même préciser l'ordre de sortie :

<li ng-repeat="person in persons | orderBy:'name'">
Copier après la connexion

Deuxième Liaison dynamique de la balise ng-model

Toute balise HTML avec une entrée utilisateur et une valeur peut être liée dynamiquement à des variables en js,
Et c'est une liaison dynamique.

<input type="text" ng-model='password'>
Copier après la connexion

Pour les variables liées, vous pouvez utiliser {{}} pour référencer directement

<span>you input password is {{password}}</span>
Copier après la connexion

Si vous êtes familier avec fiter, vous pouvez facilement sortir dans le format dont vous avez besoin

<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
Copier après la connexion

Troisième Lier l'événement click à l'événement ng-click

En utilisant ng-click, vous pouvez facilement lier des événements de clic à une étiquette.

<button ng-click="pressMe()"/>
Copier après la connexion

Bien sûr, le principe est que vous devez définir votre propre méthode pressMe dans le domaine $scope.

Contrairement à la méthode onclick traditionnelle, vous pouvez même passer un objet à la méthode ng-click, comme ceci :

<ul>
<li ng-repeat="person in persons">
<button ng-click="printf(person)"/>
</li>
</ul>
Copier après la connexion

Et bien sûr la balise ng-dblclick

Quatrième Instruction de branche ng-switch on, ng-if/ng-show/ng-hide/ng-disabled tags

Les instructions de branche vous permettent d'écrire des jugements logiques sur l'interface.

<ul>
<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>
Copier après la connexion

Cinquième Syntaxe de vérification ng-trim ng-minlength ng-maxlength requis ng-pattern et autres balises

Pour la zone de saisie du formulaire, vous pouvez utiliser la balise ci-dessus pour vérifier la saisie de l'utilisateur.
Vous savez déjà ce qu’ils signifient littéralement.

<form name="yourForm">
<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>
</form>
Copier après la connexion

Vous pouvez utiliser $scope.yourForm.inputText.$error.required pour déterminer si la zone de saisie est vide
Vous pouvez utiliser $scope.yourForm.inputText.$invalid pour déterminer si le contenu d'entrée satisfait à ng-pattern, ng-maxlength, maxlength
Le contenu d'entrée que vous obtenez via $scope.userNum a les espaces de début et de fin supprimés en raison de l'existence de ng-trim.

Sixième boîte déroulante balise ng-options

ng-options est une balise spécialement créée pour les listes déroulantes.

Copier le code Le code est le suivant :

Ce qui est affiché dans la liste déroulante est person.name Lorsque vous en sélectionnez un, vous pouvez obtenir le person.id que vous avez sélectionné via votre Sélection.

Septième Balise de contrôle CSS de style ng

ng-style vous aide à contrôler facilement vos attributs CSS

<span ng-style="myColor">your color</span>
Copier après la connexion

Vous pouvez modifier l'effet souhaité en attribuant une valeur à myColor, comme ceci :

$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};
Copier après la connexion

Huitième Requête asynchrone objet $http

AngularJS fournit un objet similaire au $.ajax de jquery pour les requêtes asynchrones.
Les opérations asynchrones sont très respectées dans AngularJS, donc les opérations $http sont toutes asynchrones, contrairement à jquery.ajax qui fournit également des paramètres asynchrones.

$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do anything what you want;
});
Copier après la connexion

Si vous faites une requête POST, les données dans params seront placées à la fin de l'URL pour vous, et les données dans data seront placées dans le corps de la requête.

Si vous ne pouvez pas le lâcher après l'avoir lu, appliquez-les à vos propres projets !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal