La directive ng-show affiche ou masque l'élément HTML basé sur si l'expression qui lui est transmise est vraie ou fausse. Si la valeur de l'expression est falsifiée, elle se cachera. Si c'est véridique alors ça montrera.
La directive ng-hide est similaire. Cependant, si la valeur est falsifiée, elle affichera l'élément HTML. Lorsque l'expression est véridique, elle le cachera.
Exemple de travail JSBin
Contrôleur :
var app = angular.module('app', []); angular.module('app')
.controller('ExampleController', ExampleController); function ExampleController() {
var vm = this;
//Binding the username to HTML element vm.username = '';
//A taken username
vm.taken_username = 'StackOverflow'; }
Vue
<section ng-controller="ExampleController as main"> <p>Enter Password</p>
<input ng-model="main.username" type="text"> <hr>
<!-- Will always show as long as StackOverflow is not typed in --> <!-- The expression is always true when it is not StackOverflow --> <div style="color:green;" ng-show="main.username != main.taken_username"> Your username is free to use!
</div>
<!-- The expression value becomes falsy -->
<div style="color:red;" ng-hide="main.username != main.taken_username"> Your username is taken!
</div>
<p>Enter 'StackOverflow' in username field to show ngHide directive.</p> </section>
ngOptions
ngOptions est une directive qui simplifie la création d'une liste déroulante HTML pour la sélection d'un élément à partir d'un tableau qui sera stocké dans un modèle. L'attribut ngOptions est utilisé pour générer dynamiquement une liste d'éléments <option> pour l'élément <select> utilisant le tableau ou l'objet obtenu en évaluant l'expression de compréhension ngOptions.
Avec ng-options le balisage peut être réduit à une balise select et la directive crée la même sélection:
<select ng-model="selectedFruitNgOptions"
ng-options="curFruit as curFruit.label for curFruit in fruit"> </select>
Il y a une autre façon de créer select options select en utilisant ng-repeat , mais il n'est pas recommandé d'utiliser ng-repeat car il est principalement utilisé pour des usages généraux, comme forEach juste pour faire une boucle. Alors que ng-options est spécifiquement conçu pour créer select options de balises select .
L’exemple ci-dessus utilisant ng-repeat serait
<select ng-model="selectedFruit">
<option ng-repeat="curFruit in fruit" value="{{curFruit}}"> {{curFruit.label}}
</option> </select>
EXEMPLE COMPLET
Voyons l'exemple ci-dessus en détail également avec quelques variations. Modèle de données pour l'exemple:
$scope.fruit = [
{ label: "Apples", value: 4, id: 2 }, { label: "Oranges", value: 2, id: 1 }, { label: "Limes", value: 4, id: 4 }, { label: "Lemons", value: 5, id: 3 } ];
<!-- label for value in array -->
Balise d'option générée lors de la sélection:
<option value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>
Effets:
f.label sera l'étiquette de l' <option> et la valeur contiendra l'objet entier.
EXEMPLE COMPLET
<!-- select as label for value in array -->
<select ng-options="f.value as f.label for f in fruit" ng-model="selectedFruit"></select>
Balise d'option générée lors de la sélection:
<option value="4"> Apples </option>
Effets:
f.value (4) sera la valeur dans ce cas, alors que l'étiquette est toujours la même.
EXEMPLE COMPLET
<!-- label group by group for value in array -->
<select ng-options="f.label group by f.value for f in fruit" ng- model="selectedFruit"></select>
Balise d'option générée lors de la sélection:
<option value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>
Effets:
Les options seront regroupées en fonction de leur value . Les options avec la même value
tomberont dans une catégorie
EXEMPLE COMPLET
<!-- label disable when disable for value in array -->
<select ng-options="f.label disable when f.value == 4 for f in fruit" ng- model="selectedFruit"></select>
Balise d'option générée lors de la sélection:
<option disabled="" value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>
"Pommes" et "Limes" seront désactivés (impossible à sélectionner) à cause de la condition
disable when f.value==4 . Toutes les options avec la value=4 seront désactivées
EXEMPLE COMPLET
<!-- label group by group for value in array track by trackexpr -->
<select ng-options="f.value as f.label group by f.value for f in fruit track by f.id" ng- model="selectedFruit"></select>
Balise d'option générée lors de la sélection:
<option value="4"> Apples </option>
Effets:
Il n’ya pas de changement visuel lors de l’utilisation de trackBy , mais Angular détectera les modifications par l’ id au lieu de par référence, ce qui est toujours une meilleure solution.
EXEMPLE COMPLET
<!-- label for value in array | orderBy:orderexpr track by trackexpr --> <select ng-options="f.label for f in fruit | orderBy:'id' track by f.id" ng- model="selectedFruit"></select>
Balise d'option générée lors de la sélection:
<option disabled="" value="{ label: "Apples", value: 4, id: 2 }"> Apples </option>
Effets:
orderBy est un filtre standard AngularJS qui organise les options par ordre croissant (par défaut), afin que "Oranges" apparaisse en premier puisque son id = 1.
EXEMPLE COMPLET
Tous les <select> avec les ng-optionsng-model doivent avoir ng-model attaché.
ngModèle
Avec ng-model, vous pouvez associer une variable à n'importe quel type de champ de saisie. Vous pouvez afficher la variable en utilisant des accolades doubles, par exemple {{myAge}} .
<input type="text" ng-model="myName"> <p>{{myName}}</p>
Au fur et à mesure que vous tapez dans le champ de saisie ou que vous le modifiez de quelque manière que ce soit, vous verrez instantanément la valeur dans le paragraphe mise à jour.
La variable ng-model, dans cet exemple, sera disponible dans votre contrôleur en tant que
$scope.myName . Si vous utilisez la syntaxe controllerAs :
<div ng-controller="myCtrl as mc">
<input type="text" ng-model="mc.myName"> <p>{{mc.myName}}</p>
</div>
Vous devrez vous référer à la portée du contrôleur en pré-attendant l'alias du contrôleur défini dans l'attribut ng-controller à la variable ng-model. De cette façon, vous n'aurez pas besoin d'injecter $scope dans votre contrôleur pour référencer votre variable ng-model, la variable sera
disponible sous la forme this.myName dans la fonction de votre contrôleur.
ngClass
Supposons que vous deviez afficher le statut d'un utilisateur et que vous ayez plusieurs classes CSS possibles. Angular permet de choisir facilement parmi une liste de plusieurs classes
possibles qui vous permettent de spécifier une liste d'objets incluant des conditions. Angular est capable d'utiliser la classe correcte en fonction de la véracité des conditions.
Votre objet doit contenir des paires clé / valeur. La clé est un nom de classe qui sera appliqué lorsque la valeur (conditionnelle) est évaluée à true.
<style>
.active { background-color: green; color: white; } .inactive { background-color: gray; color: white; } .adminUser { font-weight: bold; color: yellow; } .regularUser { color: white; }
</style> <span ng-class="{ active: user.active, inactive: !user.active, adminUser: user.level === 1, regularUser: user.level === 2 }">John Smith</span>
Angular vérifiera l'objet $scope.user pour voir le statut active et le numéro de level . Selon les
valeurs de ces variables, Angular appliquera le style correspondant au <span> .
ngIf
ng-if est une directive similaire à ng-show mais insère ou supprime l'élément du DOM au lieu de le cacher simplement. Angular 1.1.5 introduit la directive ng-If. Vous pouvez utiliser la directive ng-if au-dessus des versions 1.1.5. Ceci est utile car Angular ne traitera pas les digests pour les
éléments à l'intérieur d'un ng-if supprimé, ng-if réduit la charge de travail d'Angular, en particulier pour les liaisons de données complexes.
Contrairement à ng-show , la directive ng-if crée une étendue enfant qui utilise l'héritage prototype.
Cela signifie que la définition d'une valeur primitive sur la portée enfant ne s'appliquera pas au parent. Pour définir une primitive sur la portée $parent propriété $parent de la portée enfant doit
être utilisée.
JavaScript
angular.module('MyApp', []);
angular.module('MyApp').controller('myController', ['$scope', '$window', function myController($scope, $window) { $scope.currentUser= $window.localStorage.getItem('userName'); }]);
Vue
<div ng-controller="myController"> <div ng-if="currentUser"> Hello, {{currentUser}} </div> <div ng-if="!currentUser"> <a href="/login">Log In</a> <a href="/register">Register</a> </div></div>
DOM si
currentUsern'est pas
currentUser<div ng-controller="myController"> <div ng-if="currentUser"> Hello, {{currentUser}} </div> <!-- ng-if: !currentUser --> </div>
DOM si
currentUserest
currentUser<div ng-controller="myController"> <!-- ng-if: currentUser --> <div ng-if="!currentUser"> <a href="/login">Log In</a> <a href="/register">Register</a> </div>
</div>
Exemple de travail