¿Cuáles son las diferencias entre ng-repeat y ng-options y por qué no se comportan de la misma manera?

¿Cómo difieren ng-options y ng-repeat ?

En el siguiente código, tengo una ng-repeat que itera a través de una lista de personas:

   {{obj.name}}  

Esto es lo que creo que es un cuadro de selección equivalente en el uso de ng-options :

   

Esperaría que se comportaran de la misma manera, pero no es así. ¿Por qué?

 $scope.people = [ { id: 0, name: 'Leon', music: [ 'Rock', 'Metal', 'Dubstep', 'Electro' ] }, 

ng-repeat crea un nuevo scope para cada iteración, por lo que no funcionará tan bien como ng-options.

Para listas pequeñas, no importará, pero las listas más grandes deberían usar ng-options. Aparte de eso, proporciona mucha flexibilidad para especificar el iterador y ofrece beneficios de rendimiento sobre ng-repeat.

De la documentación :

Nota: ngOptions proporciona una función de iterador para el elemento que se debe usar en lugar de ngRepeat cuando se desea que el modelo de selección se vincule a un valor que no sea de cadena. Esto se debe a que un elemento de opción solo puede vincularse a valores de cadena en este momento.

Este violín aclara el punto: select2 se enlazará para seleccionar 1 pero no al revés. Haz clic en los botones y la razón se revelará 🙂

HTML

 
selected: {{selectedPerson}} {{typeofSelectedPerson()}}

JS

 function MyCtrl($scope){ $scope.selectedPerson = 1; $scope.people = [ { id: 1, name: 'Ze' }, { id: 2, name: 'Jao' } ]; $scope.typeofSelectedPerson = function(){ return typeof $scope.selectedPerson; } } 

En muchos casos, ngRepeat se puede usar en elementos en lugar de ngOptions para lograr un resultado similar. Sin embargo, ngOptions proporciona algunos beneficios, como una mayor flexibilidad en la asignación del modelo a través de la selección como parte de la expresión de comprensión, y adicionalmente en la reducción de memoria y el aumento de velocidad al no crear un nuevo scope para cada instancia repetida.

ng-options es la directiva que está diseñada específicamente para poblar los elementos de una lista desplegable. Una de las principales ventajas del uso de ng-options para el menú desplegable es que nos permite pasar el valor seleccionado para que sea un objeto. Mientras que, usando ng-repeat, el valor seleccionado solo puede ser una cadena.

  

Id of the selected item is : {{selectedPerson}}

Al usar el método anterior, el valor de la persona seleccionada es siempre una cadena.

  

Id of the selected item is : {{selectedPerson.id}}

Name of the selected item is : {{selectedPerson.name}}

Aquí, el valor de la persona seleccionada es un objeto para que podamos imprimir cualquier campo requerido del objeto pasando el objeto completo.

ng-repeat da un problema al enviar la información al controlador porque, en general, le mostramos el nombre al usuario, pero usamos el ID / Índice de la opción para las operaciones de back-end.

Palabras simples : con ng-options puede usar un objeto JavaScript completo.

     
{{selectedName}} {{selectedName.age}}

pero con ng-repeat tienes que lidiar con la cadena .

     
{{selectedName}} {{selectedName.age}}

This example shows how to fill a dropdown list using the ng-repeat directive.