Diretiva AngularJS ng-repeat com exemplo
James Hartmann
Diretiva ng-repeat em AngularJS
O ng-repetir A diretiva em AngularJS é usada para exibir valores repetidos definidos no controlador. Às vezes, precisamos exibir uma lista de itens na visualização. A diretiva ng-repeat nos ajuda a exibir uma lista de itens definidos no controlador em uma página de visualização.
Exemplo de diretiva AngularJS ng-repeat
Vejamos um exemplo de diretiva ng-repeat em 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>
Explicação do código:
- No controlador, primeiro definimos nosso array de itens de lista que queremos definir na visualização. Aqui definimos um array chamado “TopicNames” que contém três itens. Cada item consiste em um par nome-valor.
- A matriz de TopicsNames é então adicionada a uma variável de membro chamada “tópicos” e anexada ao nosso objeto de escopo.
- Estamos usando as tags HTML de (Lista não ordenada) e (List Item) para exibir a lista de itens em nosso array. Em seguida, usamos a diretiva ng-repeat para passar por cada item do nosso array. A palavra “tpname” é uma variável usada para apontar para cada item na matriz topics.TopicNames.
- Neste, exibiremos o valor de cada item do array.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador. Você verá todos os itens da matriz (basicamente os TopicNames nos tópicos) exibidos.
Saída:
Vários controladores AngularJS
Um exemplo de controlador avançado seria o conceito de ter vários controladores em um aplicativo JS angular.
Talvez você queira definir vários controladores para separar diferentes funções de lógica de negócios. Mencionamos anteriormente sobre a existência de métodos diferentes em um controlador, nos quais um método tinha funcionalidade separada para adição e subtração de números. Bem, você pode ter vários controladores para ter uma separação de lógica mais avançada. Por exemplo, você pode ter um controlador que faz apenas operações com números e outro que faz operações com strings.
Vejamos um exemplo de como podemos definir vários controladores em um aplicativo 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>
Explicação do código:
- Aqui estamos definindo 2 controladores chamados “firstController” e “secondController”. Para cada controlador também adicionamos algum código para processamento. Em nosso firstController, anexamos uma variável chamada “pname” que tem o valor “firstController”, e no secondController anexamos uma variável chamada “lname” que tem o valor “secondController”.
- Na visualização, estamos acessando ambos os controladores e usando a variável membro do segundo controlador.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador. Você verá todo o texto de “secondController” conforme esperado.
Saída:
Resumo
- A diretiva ng-repeat em AngularJS é usado para exibir vários itens repetidos.
- Também demos uma olhada em um controlador avançado que analisa a definição de vários controladores em um aplicativo.
