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

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

<li ng-repeat="person in persons | orderBy:'name'">

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'>

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

<span>you input password is {{password}}</span>

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>

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()"/>

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>

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>

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>

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 :

aa0943a659676da89ba1a35479b675bd18bb6ffaf0152bbe49cd8a3620346341

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>

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

$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};

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;
});

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 !