Maison interface Web js tutoriel Organisez quelques instructions courantes dans AngularJS_AngularJS

Organisez quelques instructions courantes dans AngularJS_AngularJS

May 16, 2016 pm 03:54 PM
angularjs 指令

Les directives AngularJS sont utilisées pour étendre le HTML. Ce sont des propriétés spéciales commençant par le préfixe ng-. Nous discuterons des directives suivantes :

  • ng-app - Cette commande démarre une application AngularJS.
  • ng-init - Cette directive initialise les données de l'application.
  • ng-model - Cette directive définit le modèle, qui est une variable utilisée dans AngularJS.
  • ng-repeat - Cette directive répétera l'élément HTML pour chaque élément de la collection.

directive ng-app

La directive

ng-app démarre une application AngularJS. Il définit l'élément racine. Il initialise ou démarre automatiquement l'application qui charge la page Web contenant l'application AngularJS. Il est également utilisé pour charger divers modules AngularJS dans les applications AngularJS. Dans l'exemple ci-dessous, nous définissons l'application AngularJS par défaut en utilisant l'attribut ng-app de l'élément div.

<div ng-app="">
...
</div>

Copier après la connexion

Commande ng-init

La directive ng-init initialise les données d'une application AngularJS. Il est utilisé pour mettre des valeurs dans des variables utilisées dans les applications. Dans l'exemple suivant, nous initialiserons le tableau country. Utilisez la syntaxe JSON pour définir le tableau des pays.

<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
                  {locale:'en-GB',name:'United Kingdom'},
                  {locale:'en-FR',name:'France'}]">
     
...
</div>

Copier après la connexion

directive ng-model

La directive ng-model définit les modèles/variables utilisés dans les applications AngularJS. Dans l'exemple ci-dessous, nous définissons un modèle nommé "name".

<div ng-app="">
...
<p>Enter your Name: <input type="text" ng-model="name"></p>
</div>

Copier après la connexion

directive ng-repeat

La directive

ng-repeat répète chaque élément d'une collection d'éléments HTML. Dans l'exemple ci-dessous, nous avons parcouru les pays du tableau.

<div ng-app="">
...
  <p>List of Countries with locale:</p>
  <ol>
   <li ng-repeat="country in countries">
     {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
   </li>
  </ol>
</div>

Copier après la connexion

Exemple

L'exemple suivant démontrera toutes les commandes ci-dessus.
testAngularJS.html

<html>
<title>AngularJS Directives</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
                  {locale:'en-GB',name:'United Kingdom'},
                  {locale:'en-FR',name:'France'}]">
  <p>Enter your Name: <input type="text" ng-model="name"></p>
  <p>Hello <span ng-bind="name"></span>!</p>
  <p>List of Countries with locale:</p>
  <ol>
   <li ng-repeat="country in countries">
     {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
   </li>
  </ol>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Copier après la connexion

Sortie

Ouvrez textAngularJS.html dans votre navigateur Web. Entrez un nom et voyez les résultats ci-dessous.

2015616115415280.png (613×372)

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Où trouver la courte de la grue à atomide atomique
1 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment obtenir des objets à l'aide de commandes dans Terraria ? -Comment collecter des objets dans Terraria ? Comment obtenir des objets à l'aide de commandes dans Terraria ? -Comment collecter des objets dans Terraria ? Mar 19, 2024 am 08:13 AM

Comment obtenir des objets à l'aide de commandes dans Terraria ? 1. Quelle est la commande pour donner des objets dans Terraria ? Dans le jeu Terraria, donner des commandes à des objets est une fonction très pratique. Grâce à cette commande, les joueurs peuvent obtenir directement les objets dont ils ont besoin sans avoir à combattre des monstres ou à se téléporter vers un certain endroit. Cela peut grandement faire gagner du temps, améliorer l’efficacité du jeu et permettre aux joueurs de se concentrer davantage sur l’exploration et la construction du monde. Dans l’ensemble, cette fonctionnalité rend l’expérience de jeu plus fluide et plus agréable. 2. Comment utiliser Terraria pour donner des commandes d'objets 1. Ouvrez le jeu et entrez dans l'interface du jeu. 2. Appuyez sur la touche "Entrée" du clavier pour ouvrir la fenêtre de discussion. 3. Entrez le format de commande dans la fenêtre de discussion : "/give[player name][item ID][itemQuantity]".

Démarrage rapide de VUE3 : utiliser les instructions de Vue.js pour changer d'onglet Démarrage rapide de VUE3 : utiliser les instructions de Vue.js pour changer d'onglet Jun 15, 2023 pm 11:45 PM

Cet article vise à aider les débutants à démarrer rapidement avec Vue.js3 et à obtenir un simple effet de changement d'onglet. Vue.js est un framework JavaScript populaire qui peut être utilisé pour créer des composants réutilisables, gérer facilement l'état de votre application et gérer les interactions de l'interface utilisateur. Vue.js3 est la dernière version du framework Par rapport aux versions précédentes, il a subi des changements majeurs, mais les principes de base n'ont pas changé. Dans cet article, nous utiliserons les instructions de Vue.js pour implémenter l'effet de changement d'onglet, dans le but de familiariser les lecteurs avec Vue.js.

Les 5 derniers tutoriels Angularjs en 2022, de l'entrée à la maîtrise Les 5 derniers tutoriels Angularjs en 2022, de l'entrée à la maîtrise Jun 15, 2017 pm 05:50 PM

Javascript est un langage tout à fait unique. Il est unique en termes d'organisation du code, de paradigme de programmation du code et de théorie orientée objet. La question de savoir si Javascript est un langage orienté objet a été débattue depuis un certain temps. Il y a évidemment une réponse depuis longtemps. Cependant, même si Javascript est dominant depuis vingt ans, si vous souhaitez comprendre les frameworks populaires tels que jQuery, Angularjs et même React, il suffit de regarder le « Black Horse Cloud Classroom JavaScript Advanced Framework ». Tutoriel vidéo de conception".

Explorez les possibilités infinies de la méthode de saisie fournie avec les commandes MC (un outil innovant pour créer une expérience de jeu parfaite - la méthode de saisie fournie avec les commandes MC) Explorez les possibilités infinies de la méthode de saisie fournie avec les commandes MC (un outil innovant pour créer une expérience de jeu parfaite - la méthode de saisie fournie avec les commandes MC) May 02, 2024 pm 03:01 PM

Les appareils mobiles sont devenus un élément essentiel de la vie des gens dans la société moderne. Les jeux sont également devenus l’une des principales formes de divertissement pendant le temps libre. Des personnes travaillent constamment au développement de nouveaux outils et technologies pour optimiser le gameplay et améliorer l’expérience de jeu. La méthode de saisie avec sa propre commande MC est l'une des innovations les plus marquantes. Et comment cela peut apporter une meilleure expérience de jeu aux joueurs. Cet article approfondira les possibilités infinies de la méthode de saisie de commande MC intégrée. Introduction à la méthode de saisie de commande MC intégrée La méthode de saisie de commande MC intégrée est un outil innovant qui combine les fonctions des commandes MC et des méthodes de saisie intelligentes. Cela permet plus d'opérations et de fonctions. En installant la méthode de saisie sur un appareil mobile, les joueurs peuvent facilement utiliser diverses commandes dans le jeu. Entrez rapidement les commandes pour améliorer l'efficacité du jeu

Utilisez PHP et AngularJS pour créer un site Web réactif afin d'offrir une expérience utilisateur de haute qualité Utilisez PHP et AngularJS pour créer un site Web réactif afin d'offrir une expérience utilisateur de haute qualité Jun 27, 2023 pm 07:37 PM

À l’ère de l’information d’aujourd’hui, les sites Web sont devenus un outil important permettant aux individus d’obtenir des informations et de communiquer. Un site Web réactif peut s’adapter à divers appareils et offrir aux utilisateurs une expérience de haute qualité, ce qui est devenu un point chaud dans le développement de sites Web modernes. Cet article expliquera comment utiliser PHP et AngularJS pour créer un site Web réactif afin d'offrir une expérience utilisateur de haute qualité. Introduction à PHP PHP est un langage de programmation open source côté serveur idéal pour le développement Web. PHP présente de nombreux avantages, tels que la facilité d'apprentissage, la multiplateforme, la riche bibliothèque d'outils et l'efficacité du développement.

Quelles sont les deux parties d'instructions qu'un ordinateur peut exécuter directement ? Quelles sont les deux parties d'instructions qu'un ordinateur peut exécuter directement ? Dec 09, 2020 am 09:15 AM

Les instructions que l'ordinateur peut exécuter directement comprennent des codes d'opération et des opérandes. L'opcode fait référence à la partie de l'instruction ou au champ spécifié dans le programme informatique pour effectuer l'opération. Il s'agit en fait du numéro de séquence d'instruction, qui est utilisé pour indiquer au processeur quelle instruction doit être exécutée.

Créer des applications Web en utilisant PHP et AngularJS Créer des applications Web en utilisant PHP et AngularJS May 27, 2023 pm 08:10 PM

Avec le développement continu d'Internet, les applications Web sont devenues un élément important de la construction de l'information d'entreprise et un moyen nécessaire au travail de modernisation. Afin de faciliter le développement, la maintenance et l'extension des applications Web, les développeurs doivent choisir un cadre technique et un langage de programmation adaptés à leurs besoins de développement. PHP et AngularJS sont deux technologies de développement Web très populaires. Ce sont respectivement des solutions côté serveur et côté client. Leur utilisation combinée peut considérablement améliorer l'efficacité du développement et l'expérience utilisateur des applications Web. Avantages de PHPPHP

L'invite n'est plus nécessaire, vous pouvez jouer au système de dialogue multimodal avec juste vos mains, iChat est là ! L'invite n'est plus nécessaire, vous pouvez jouer au système de dialogue multimodal avec juste vos mains, iChat est là ! May 15, 2023 pm 05:55 PM

Xi Xiaoyao Technology a déclaré que l'auteur original | IQ est tombé au sol. Récemment, de nombreuses équipes ont recréé sur la base du ChatGPT convivial, et beaucoup d'entre elles ont des résultats relativement accrocheurs. Le travail d'InternChat met l'accent sur la convivialité en interagissant avec le chatbot au-delà du langage (curseurs et gestes) pour les tâches multimodales. Le nom d'InternChat est également intéressant. Il signifie interaction, non verbal et chatbots. Il peut être appelé iChat. Contrairement aux systèmes interactifs existants qui s'appuient sur un langage pur, iChat améliore considérablement l'efficacité de la communication entre les utilisateurs et les chatbots en ajoutant des instructions de pointage. De plus, l'auteur a également

See all articles