AngularJS => Directivas incorporadas

Expresiones angulares - Texto vs. Número

Este ejemplo demuestra cómo se evalúan las expresiones angulares cuando se usa type="text" y type="number" para el elemento de entrada. Considere el siguiente controlador y vea:

Controlador

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

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

Ver

<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>

Cuando se usa + en una expresión vinculada al ingreso de texto , el operador concatenará las cadenas (primer ejemplo), mostrando 55 en la pantalla * .
Cuando se usa + en una expresión vinculada a la entrada de números , el operador devuelve la suma de los números (segundo ejemplo), mostrando 10 en la pantalla * .

* - Eso es hasta que el usuario cambia el valor en el campo de entrada, luego la pantalla cambiará en consecuencia.

Ejemplo de trabajo

ngRepetir

ng-repeat es una directiva integrada en Angular que le permite iterar una matriz o un objeto y le permite repetir un elemento una vez para cada elemento de la colección.

ng-repetir una matriz

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

Dónde:
item = item individual en la colección
itemCollection = La matriz que está iterando

ng-repetir un objeto

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

Dónde:
clave = el nombre de la propiedad
valor = el valor de la propiedad
myObject = el objeto que estás iterando

filtrar su ng-repetir por la entrada del usuario

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

Dónde:
searchText = el texto por el cual el usuario quiere filtrar la lista
stringArray = una matriz de cadenas, por ejemplo, ['string', 'array']

También puede mostrar o hacer referencia a los elementos filtrados en otro lugar asignando un alias de salida de filtro as aliasName , de este modo:

<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 y ng-repeat-end

Para repetir varios elementos de DOM definiendo un inicio y un punto final, puede usar las directivas ng-repeat-start y 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>

Salida:

Es importante cerrar siempre ng-repeat-start con ng-repeat-end .

Variables

ng-repeat también expone estas variables dentro de la expresión

Variable	Tipo	Detalles
`$index`	Número	Es igual al índice de la iteración actual ($ index === 0 se evaluará como verdadero en el primer elemento iterado; vea `$first` )
`$first`	Booleano	Evalúa a verdadero en el primer elemento iterado
`$last`	Booleano	Evalúa a verdadero en el último elemento iterado
`$middle`	Booleano	Se evalúa como verdadero si el elemento se encuentra entre `$first` y `$last`
`$even`	Booleano	Se evalúa como verdadero en una iteración de número par (equivalente a `$index%2===0` )
`$odd`	Booleano	Se evalúa como verdadero en una iteración de número impar (equivalente a `$index%2===1` )

Consideraciones de rendimiento

La representación de ngRepeat puede ser lenta, especialmente cuando se usan colecciones grandes.

Si los objetos de la colección tienen una propiedad de identificador, siempre debe track by el identificador en lugar de todo el objeto, que es la funcionalidad predeterminada. Si no hay ningún identificador presente, siempre puede usar el $index incorporado.

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

Alcance de ngRepeat

ngRepeat siempre creará un ámbito secundario aislado, por lo que se debe tener cuidado si se debe acceder al ámbito principal dentro de la repetición.

Este es un ejemplo simple que muestra cómo puede establecer un valor en su ámbito principal desde un evento de clic dentro 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'
}];

Si solo había val = item.value en ng-click , no se actualizará el val en el ámbito principal debido al ámbito aislado. Es por eso que se accede al alcance principal con $parent referencia de $parent o con la sintaxis de controllerAs (por ejemplo, ng-controller="mainController as ctrl" ).

Anidado ng-repetir

También puede utilizar ng-nest anidado.

<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']
  ];
});

Aquí para acceder al índice de padre ng-repeat dentro de hijo ng-repeat, puede usar $parent.$index .

ngShow y ngOcultar

La directiva ng-show muestra u oculta el elemento HTML en función de si la expresión que se le pasa es verdadera o falsa. Si el valor de la expresión es falsy, entonces se ocultará. Si es veraz entonces se mostrará.

La directiva ng-hide es similar. Sin embargo, si el valor es falsy, mostrará el elemento HTML. Cuando la expresión sea veraz la esconderá.

Ejemplo de JSBin de trabajo

Controlador :

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';
  
}

Ver

<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>

ngOpciones

ngOptions es una directiva que simplifica la creación de un cuadro desplegable html para la selección de un elemento de una matriz que se almacenará en un modelo. El atributo ngOptions se usa para generar dinámicamente una lista de elementos <option> para el elemento <select> usando la matriz u objeto obtenido al evaluar la expresión de comprensión ngOptions.

Con ng-options el marcado se puede reducir a solo una etiqueta de selección y la directiva creará la misma selección:

<select ng-model="selectedFruitNgOptions" 
        ng-options="curFruit as curFruit.label for curFruit in fruit">
</select>

Hay otra forma de crear opciones de select usando ng-repeat , pero no se recomienda usar ng-repeat ya que se usa principalmente para fines generales como, por ejemplo, forEach solo para hacer un bucle. Mientras que ng-options es específicamente para crear opciones de etiqueta select .

El ejemplo anterior usando ng-repeat sería

<select ng-model="selectedFruit">
    <option ng-repeat="curFruit in fruit" value="{{curFruit}}">
        {{curFruit.label}}
    </option>
</select>

EJEMPLO COMPLETO

Veamos el ejemplo anterior en detalle también con algunas variaciones en él.

Modelo de datos para el ejemplo:

$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>