Directiva AngularJS ng-repeat con ejemplo

Directiva ng-repeat en AngularJS

El sistema ng-repetir La directiva en AngularJS se usa para mostrar valores repetidos definidos en el controlador. A veces requerimos mostrar una lista de elementos en la vista. La directiva ng-repeat nos ayuda a mostrar una lista de elementos definidos en el controlador en una página de visualización.

Ejemplo de directiva ng-repeat de AngularJS

Veamos un ejemplo de directiva ng-repeat en AngularJS:

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
<h1>Topics</h1>
<ul><li ng-repeat="tpname in TopicNames">
		{{tpname.name}}
		</li></ul>
</div>

<script> 
	var app = angular.module('DemoApp',[]);
	app.controller('DemoController', function($scope){

	$scope.TopicNames =[
		{name: "What controller do from Angular's perspective"},
		{name: "Controller Methods"},
		{name: "Building a basic controller"}];	
		});
</script>

</body>
</html>

Explicación del código:

En el controlador, primero definimos nuestra matriz de elementos de la lista que queremos definir en la vista. Aquí hemos definido una matriz llamada "TopicNames" que contiene tres elementos. Cada elemento consta de un par nombre-valor.
Luego, la matriz de TopicsNames se agrega a una variable miembro llamada "temas" y se adjunta a nuestro objeto de alcance.
Estamos utilizando las etiquetas HTML de (Lista desordenada) y (Elemento de lista) para mostrar la lista de elementos en nuestra matriz. Luego usamos la directiva ng-repeat para revisar todos y cada uno de los elementos de nuestra matriz. La palabra "tpname" es una variable que se utiliza para señalar cada elemento de la matriz temas.TopicNames.
En esto, mostraremos el valor de cada elemento de la matriz.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador. Verá todos los elementos de la matriz (básicamente, los nombres de los temas).

Salida:

AngularJS múltiples controladores

Un ejemplo de controlador avanzado sería el concepto de tener múltiples controladores en una aplicación JS angular.

Es posible que desee definir varios controladores para separar diferentes funciones de lógica empresarial. Anteriormente mencionamos acerca de tener diferentes métodos en un controlador en el que un método tenía funcionalidad separada para sumar y restar números. Bueno, puedes tener varios controladores para tener una separación de lógica más avanzada. Por ejemplo, puede tener un controlador que solo realice operaciones con números y el otro que realice operaciones con cadenas.

Veamos un ejemplo de cómo podemos definir múltiples controladores en una aplicación angular.JS.

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<div ng-app="DemoApp">
	<div ng-controller="firstcontroller">
		<div ng-controller="secondcontroller">
		{{lname}}
		</div>
	</div>
</div>

<script>
	var app = angular.module('DemoApp',[]);
	app.controller('firstcontroller', function($scope){
		$scope.pname="firstcontroller";
			});
		app.controller('secondcontroller', function($scope){
			$scope.lname="secondcontroller";
			});
</script>
</body>
</html>

Explicación del código:

Aquí estamos definiendo 2 controladores llamados "primerControlador" y "segundoControlador". Para cada controlador también agregamos algo de código para su procesamiento. En nuestro firstController, adjuntamos una variable llamada "pname" que tiene el valor "firstController", y en secondController adjuntamos una variable llamada "lname" que tiene el valor "segundoController".
En la vista, accedemos a ambos controladores y utilizamos la variable miembro del segundo controlador.

Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute el código en el navegador. Verá todo el texto de “secondController” como se esperaba.

Salida:

Resum

La directiva ng-repeat en AngularJS se utiliza para mostrar varios elementos repetidos.
También echamos un vistazo a un controlador avanzado que analizaba la definición de múltiples controladores en una aplicación.

Te podría gustar: