AngularJS - Manipulando Elementos Repetitivos

Uma parte importante dos aplicativos da web é o amostra de listaIsso sempre será importante sempre que trabalharmos com bancos de dados, pois temos que mostrar os itens armazenados, assim como, por exemplo, se tivermos uma loja online, temos que mostrar uma lista de produtos.
O que devemos entender é que embora os registros sejam diferentes, os elementos como tais se repetem, pois provavelmente são linhas de uma tabela ou de uma lista ordenada, qualquer que seja a diferença de conteúdo não representa uma diferença de estrutura.
AngularJS não complica nossas vidas, simplesmente se quisermos usar ou fazer uma lista devemos usar ng-repeat que cria um elemento para cada elemento contido em uma lista, com isso podemos passar uma lista de produtos e gerar facilmente uma tabela.
Digamos que estejamos fazendo uma lista de alunos para uma escola, a chave é gerar a lista, normalmente a obteríamos de algum serviço de internet que consulta um banco de dados, mas para simplificar vamos fazer uma lista nós mesmos, então chamamos essa lista dentro de nosso $ scope ser capaz de usá-lo, com ele dentro do HTML podemos incorporar a instrução ng-repeat que mencionamos, vamos ver o seguinte código:

 var students = [{nome: 'María Rojo', id: '1'}, {nome: 'Manolo Rodriguez', id: '2'}, {nome: 'João Pinto', id: '3'}]; função StudentListController ($ scope) {$ scope.students = students; } 

Aqui definimos a lista de alunos e, em seguida, definimos o controlador com o qual passamos essa lista para o $ scope do controlador, agora devemos escrever o código HTML:

 
 
 {{nome do aluno}}

Aqui, vemos que definimos nossa lista como um controlador de AngularJS e com ele o $ scope do referido controlador nos permite acessar a lista de alunos, então usamos ng-repeat dizendo que você vai criar um aluno para cada elemento da lista de alunos e, finalmente, dentro do

criamos uma âncora que nos leva a outro lugar dentro do aplicativo. Vamos ver a seguinte imagem de como isso se parece em nosso navegador:

Função Splice ()Outra coisa que podemos fazer é incorporar novos elementos na lista, para isso temos a função splice ()Se, por exemplo, o incorporarmos em um botão que adiciona novos alunos, veremos automaticamente a mudança, graças ao fato de que AngularJS Dá-nos aquele toque de atualização em tempo real do documento sem ter que recarregar a página.
Vamos ver no código a seguir como o controlador ficaria para adicionar um aluno:

 var students = [{nome: 'María Rojo', id: '1'}, {nome: 'Manolo Rodriguez', id: '2'}, {nome: 'João Pinto', id: '3'}]; função StudentListController ($ scope) {$ scope.students = students; $ scope.addNew = function () {$ scope.students.splice (1, 0, {nome: 'Joaquin Fernandez', id: '4'}); }; } 

Agora só temos que chamar a nova função em nosso HTML, podemos fazer isso da seguinte maneira:

 {{nome do aluno}}

Inserir

Vamos ver como fica em nosso navegador:

Vemos como adicionamos o novo aluno à lista, porém cada vez que clicamos no botão adicionamos a mesma pessoa, isso é porque não fizemos um código dinâmico, mas isso é outra questão, o que devemos destacar é que nós tivemos que adicione um ao qual colocamos o controlador, desta forma podemos incorporar nosso botão no $ scope.
Com isso terminamos este tutorial, pois vemos o manuseio de elementos repetidos em AngularJS É bastante simples e dá-nos a possibilidade de criar listas rapidamente como podemos ver nos exemplos.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo