interface Web
js tutoriel
Angular.js examine les conseils d'utilisation de ng-app et ng-model_AngularJS
Angular.js examine les conseils d'utilisation de ng-app et ng-model_AngularJS
Structure simple de index.html dans Angular.js :
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Your name: <input type="text" ng-model="yourname" placeholder="World">
<hr>
Hello {{yourname || 'World'}}!
</body>
</html>
L'attribut ng-app est l'instruction flag d'angular.js, qui marque la portée d'angular.js. ng-app peut être ajouté à de nombreux endroits, comme celui ci-dessus ajouté à la balise html, indiquant que le script angulaire fonctionne sur toute la page. Vous pouvez également ajouter l'attribut ng-app localement. Par exemple, l'ajout de ng-app dans un certain div indiquera que toute la zone div sera analysée à l'aide de scripts angulaires, tandis que les autres emplacements ne seront pas analysés par des scripts angulaires.
ng-model signifie créer un modèle de données. Ici, dans la zone de saisie du nom, nous définissons un modèle de données yourname. Une fois le modèle défini, nous pouvons l'appeler ci-dessous en tirant parti de {{}}. Ceci termine la liaison des données lorsque nous saisissons du contenu dans la zone de saisie, il sera synchronisé avec le bloc d'instruction Hello ci-dessous.
Le modèle de données défini par ng-model peut non seulement être utilisé dans les scénarios ci-dessus, mais peut également être largement utilisé dans de nombreuses situations.
1. Définir le filtre pour implémenter la fonction de recherche
Dans le code suivant, nous utilisons une simple définition de modèle de données + un filtre pour compléter une fonction de recherche de liste. (Il s'agit d'un exemple de code provenant du site Web chinois, vous n'avez donc pas à vous soucier d'abord des parties peu claires)
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
Search: <input ng-model="query">
</div>
<div class="span10">
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
Dans le code ci-dessus, la requête du modèle de données est liée à la balise d'entrée du champ de recherche. De cette manière, les informations saisies par l'utilisateur seront synchronisées avec le modèle de données de requête. Dans le li suivant, vous pouvez utiliser filter:query pour implémenter la fonction de filtrage des données dans la liste et effectuer un filtrage en fonction des informations saisies par l'utilisateur.
2. Définissez orderBy pour implémenter la fonction de tri de liste
Dans le code suivant, de la même manière que filter, orderBy permet d'ajouter une fonction de tri à la liste :
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul> Ce qui précède concerne les compétences d'utilisation de ng-app et ng-model. J'espère que vous pourrez en tirer quelque chose en passant en revue le passé et en apprenant le nouveau.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Explication détaillée du gestionnaire d'état d'apprentissage angulaire NgRx
May 25, 2022 am 11:01 AM
Cet article vous donnera une compréhension approfondie du gestionnaire d'état NgRx d'Angular et vous présentera comment utiliser NgRx. J'espère qu'il vous sera utile !
L'apprentissage angulaire parle de composants autonomes (Standalone Component)
Dec 19, 2022 pm 07:24 PM
Cet article vous amènera à continuer à apprendre Angular et à comprendre brièvement le composant autonome (Standalone Component) dans Angular. J'espère qu'il vous sera utile !
Une brève analyse des composants indépendants dans Angular et voir comment les utiliser
Jun 23, 2022 pm 03:49 PM
Cet article vous présentera les composants indépendants dans Angular, comment créer un composant indépendant dans Angular et comment importer des modules existants dans le composant indépendant. J'espère qu'il vous sera utile !
Que dois-je faire si le projet est trop gros ? Comment diviser raisonnablement les projets Angular ?
Jul 26, 2022 pm 07:18 PM
Le projet Angular est trop volumineux, comment le diviser raisonnablement ? L'article suivant vous expliquera comment diviser raisonnablement les projets Angular. J'espère qu'il vous sera utile !
Parlons de la façon de personnaliser le format angulaire-datetime-picker
Sep 08, 2022 pm 08:29 PM
Comment personnaliser le format angulaire-datetime-picker ? L'article suivant explique comment personnaliser le format. J'espère qu'il sera utile à tout le monde !
Un guide étape par étape pour comprendre l'injection de dépendances dans Angular
Dec 02, 2022 pm 09:14 PM
Cet article vous guidera à travers l'injection de dépendances, présentera les problèmes que l'injection de dépendances résout et sa méthode d'écriture native, et parlera du framework d'injection de dépendances d'Angular. J'espère qu'il vous sera utile !
Compréhension approfondie de NgModule (module) en Angular
Sep 05, 2022 pm 07:07 PM
Le module NgModule est un point important dans Angular, car l'élément de base d'Angular est NgModule. Cet article vous fera découvrir le module NgModule dans Angular. J'espère qu'il vous sera utile !
Sélecteurs :host, :host-context, ::ng-deep d'Angular
May 31, 2022 am 11:08 AM
Cet article vous donnera une compréhension approfondie de plusieurs sélecteurs spéciaux dans Angular : host, :host-context, ::ng-deep. J'espère qu'il vous sera utile !
