AngularJS => Directives intégrées

Expressions angulaires - Texte vs Nombre

Cet exemple montre comment les expressions angulaires sont évaluées lors de l'utilisation de type="text" et de type="number" pour l'élément d'entrée. Considérez le contrôleur suivant et visualisez:

Manette

 var app = angular.module('app', []);

 app.controller('ctrl', function($scope) {
     $scope.textInput = {
         value: '5'
     };     
     $scope.numberInput = {
         value: 5
     };
 });

Vue

<div ng-app="app" ng-controller="ctrl">
    <input type="text" ng-model="textInput.value">
    {{ textInput.value + 5 }}
    <input type="number" ng-model="numberInput.value">
    {{ numberInput.value + 5 }}
</div>

Lorsque vous utilisez + dans une expression liée à une entrée de texte , l'opérateur concaténera les chaînes (premier exemple), affichant 55 sur l'écran * .
Lorsque vous utilisez + dans une expression liée à la saisie d'un numéro , l'opérateur retourne la somme des nombres (deuxième exemple), affichant 10 sur l'écran * .

* - Jusqu'à ce que l'utilisateur modifie la valeur dans le champ de saisie, l'affichage changera ensuite en conséquence.

Exemple de travail

ngRépéter

ng-repeat est une directive intégrée dans Angular qui vous permet d'itérer un tableau ou un objet et vous permet de répéter un élément une fois pour chaque élément de la collection.

ng-repeat un tableau

<ul>
    <li ng-repeat="item in itemCollection">
       {{item.Name}}
    </li>
</ul>

Où:
item = article individuel dans la collection
itemCollection = Le tableau que vous itérez

ng-repeter un objet

<ul>
    <li ng-repeat="(key, value) in myObject">
       {{key}} : {{value}}
    </li>
</ul>

Où:
key = le nom de la propriété
valeur = la valeur de la propriété
myObject = l'objet que vous itérez

filtrer votre ng-repeat par entrée utilisateur

<input type="text" ng-model="searchText">
<ul>
    <li ng-repeat="string in stringArray | filter:searchText">
       {{string}}
    </li>
</ul>

Où:
searchText = le texte que l'utilisateur souhaite filtrer par liste
stringArray = un tableau de chaînes, par exemple ['string', 'array']

Vous pouvez également afficher ou référencer les éléments filtrés ailleurs en attribuant un alias avec as aliasName , comme ceci:

<input type="text" ng-model="searchText">
<ul>
    <li ng-repeat="string in stringArray | filter:searchText as filteredStrings">
       {{string}}
    </li>
</ul>
<p>There are {{filteredStrings.length}} matching results</p>

ng-repeat-start et ng-repeat-end

Pour répéter plusieurs éléments DOM en définissant un point de départ et un point de fin, vous pouvez utiliser les directives ng-repeat-start et ng-repeat-end .

<ul>
    <li ng-repeat-start="item in [{a: 1, b: 2}, {a: 3, b:4}]">
        {{item.a}}
    </li>
    <li ng-repeat-end>
        {{item.b}}
    </li>
</ul>

Sortie:

Il est important de toujours fermer ng-repeat-start avec ng-repeat-end .

Les variables

ng-repeat expose également ces variables à l'intérieur de l'expression

Variable	Type	Détails
`$index`	Nombre	Égal à l'index de l'itération courante ($ index === 0 sera évalué à true au premier élément itéré; voir d' `$first` )
`$first`	Booléen	Évalue à true au premier élément itéré
`$last`	Booléen	Évalue à true au dernier élément itéré
`$middle`	Booléen	Évalue à true si l'élément se situe entre `$first` et `$last`
`$even`	Booléen	Évalué à true à une itération paire (équivalent à `$index%2===0` )
`$odd`	Booléen	Évalué à true à une itération impaire (équivalent à `$index%2===1` )

Considérations de performance

Rendu ngRepeat peut devenir lent, en particulier lors de l'utilisation de grandes collections.

Si les objets de la collection ont une propriété d'identifiant, vous devez toujours track by l'identificateur plutôt que l'objet entier, qui est la fonctionnalité par défaut. Si aucun identifiant n'est présent, vous pouvez toujours utiliser l' $index intégré.

<div ng-repeat="item in itemCollection track by item.id">
<div ng-repeat="item in itemCollection track by $index">

Portée de ngRepeat

ngRepeat crée toujours une étendue enfant isolée, il faut donc faire attention si la portée parent doit être accessible à l'intérieur de la répétition.

Voici un exemple simple montrant comment définir une valeur dans votre portée parent à partir d'un événement click à l'intérieur de ngRepeat .

scope val:  {{val}}<br/>
ctrlAs val: {{ctrl.val}}
<ul>
    <li ng-repeat="item in itemCollection">
        <a href="#" ng-click="$parent.val=item.value; ctrl.val=item.value;">
            {{item.label}} {{item.value}}
        </a>
    </li>
</ul>

$scope.val = 0;
this.val = 0;

$scope.itemCollection = [{
    id: 0,
    value: 4.99,
    label: 'Football'
},
{
    id: 1,
    value: 6.99,
    label: 'Baseball'
},
{
    id: 2,
    value: 9.99,
    label: 'Basketball'
}];

S'il n'y avait que val = item.value à ng-click il ne val = item.value pas à jour le val dans l'étendue parent en raison de l'étendue isolée. C'est pourquoi la portée parent est accessible avec $parent référence $parent ou avec la syntaxe controllerAs (par exemple ng-controller="mainController as ctrl" ).

Imbriqué ng-repeat

Vous pouvez également utiliser ng-repeat imbriqué.

<div ng-repeat="values in test">
    <div ng-repeat="i in values">
      [{{$parent.$index}},{{$index}}] {{i}}
    </div>
</div>

var app = angular.module("myApp", []);
app.controller("ctrl", function($scope) {
  $scope.test = [
    ['a', 'b', 'c'],
    ['d', 'e', 'f']
  ];
});

Ici, pour accéder à l'index du parent ng-repeat à l'intérieur de child ng-repeat, vous pouvez utiliser $parent.$index .

ngShow et ngHide

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>
    
    <!-- Will only show when StackOverflow is typed in -->
    <!-- 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 -->
<select ng-options="f.label for f in fruit" ng-model="selectedFruit"></select>