Explication détaillée de la syntaxe AngularJS_AngularJS

Le processus de fonctionnement de base des modèles et des données est le suivant :

L'utilisateur demande la page de démarrage de l'application
Le navigateur de l'utilisateur initie une connexion http au serveur, puis charge la page index.html, qui contient le modèle
Angular est chargé dans la page, attend que la page se charge et recherche la directive ng-app, qui est utilisée pour définir les limites du modèle
Angular parcourt le modèle pour trouver les relations spécifiées et de liaison, ce qui déclenchera une série d'actions : enregistrer les écouteurs, effectuer certaines opérations DOM et obtenir les données d'initialisation du serveur. Enfin, l'application démarrera et convertira le modèle en vue DOM
Connectez-vous au serveur pour charger d'autres données qui doivent être affichées à l'utilisateur

Afficher le texte

L'un utilise le formulaire {{}}, tel que {{greeting}} et le second ng-bind="greeting"

Utilisez la première méthode. Les pages non rendues peuvent être vues par les utilisateurs. Il est recommandé d'utiliser la deuxième méthode pour les pages d'index. Les pages restantes peuvent utiliser la première méthode

.

Saisie du formulaire

Copier le code Le code est le suivant :

Formulaire

Démarrage : //Appelle la fonction lors du changement
Recommandation : {{funding.needed}}

Dans certains cas, nous ne voulons pas agir immédiatement dès qu’il y a un changement, mais nous devons attendre. Par exemple :

Copier le code Le code est le suivant :

Formulaire




//ng-submit
Démarrage :
Recommandation : {{funding.needed}}
                                                                                                                                                                                                                    Financer ma startup !

非表单提交型的交互，以cliquez为例

复制代码 代码如下 :

   
   
   


   
        Démarrage :
        Recommandation : {{funding.needed}}
        Financer ma startup !
        Réinitialiser
   

列表、表格以及其他迭代型元素

ng-repeat会通过$index返回当前引用的元素序号。 示例代码如下：

复制代码 代码如下 :

   
   
   


   
       
           
           
           
       
   

{{$index 1}}

{{student.name}}

{{student.score}}

隐藏与显示
ng-show et ng-hide 功能是等价的，但是运行效果正好相反。

复制代码 代码如下 :

<script><br> fonction DeathrayMenuController ($ scope) {<br> $scope.menuState = {show:false};//Changez en menuState.show = false ici et l'effet ne sera pas affiché. À l'avenir, il est préférable de déclarer les variables à l'intérieur de {}<br> $scope.toggleMenu = fonction() {<br> $scope.menuState.show = !$scope.menuState.show;<br> };<br> ><br> </script>

Toggle Menu

• Stun


• Désintégrer


• Effacer de l'historique

Classes et styles CSS

ng-class et ng-style peuvent accepter une expression. Le résultat de l'exécution de l'expression peut être l'une des valeurs suivantes :

Une chaîne représentant les noms de classes CSS, séparés par des espaces

tableau de noms de classe CSS
Mappage du nom de la classe CSS à la valeur booléenne
L'exemple de code est le suivant :

Copier le code Le code est le suivant :

<script><br> fonction HeaderController ($ scope) {<br> $scope.isError = false;<br> $scope.isWarning = false;<br> $scope.showError = fonction() {<p>           $scope.messageText = "Erreur !!!"<br>           $scope.isError = true;<br>           $scope.isWarning = false;<br> ><br> </p> $scope.showWarning = function() {<p>           $scope.messageText = "Attention !!!"<br>           $scope.isWarning = true;<br>           $scope.isError = true;<br> ><br> ><br> </script>

{{messageText}}

Erreur
Avertissement

Mappage des noms de classes CSS en valeurs booléennes

L'exemple de code est le suivant :

Copier le code Le code est le suivant :

<script><br> Fonction Restaurant ($ scope) {<br> $scope.list = [{name:"The Handsome",cuisine:"BBQ"},{name:"Green",cuisine:"Salads"},{name:"House",cuisine:'Seafood'}]; <p> $scope.selectRestaurant = fonction (ligne) {<br>                  $scope.selectedRow = row;<br> ><br> ><br> </script>



//Mappage des noms de classes CSS en valeurs booléennes , lorsque la valeur de l'attribut de modèle selectedRow est égale à $index dans ng-repeat, le style sélectionné sera défini sur cette ligne