AngularJS ismétlés

Szerző: Sallai András
Copyright © Sallai András, 2017
Licenc: GNU Free Documentation License 1.3
Web: http://szit.hu

Az ngRepeat direktíva

Az ngRepeat direktíva segítségével bejárhatunk egy kollekciót elemenként. Az egyes elemekre hivatkozhatunk kulccsal és indexel. Az indexek automatikusan létrejönnek, a kulcsoknak adottnak kell lennie.

Egyszerű ismétlés

<!DOCTYPE html>
<html ng-app="egy">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ismétlés</title>
 
</head>
<body ng-controller="egyCtrl">
 
  <h2 ng-bind="cim"></h2>
  <ul>
    <li ng-repeat="nev in nevek">{{nev}}</li>    
  </ul>
 
 
<script src="angular.min.js"></script>  
<script>  
 
var egy = angular.module('egy', []);
 
egy.controller('egyCtrl', function($scope){
   $scope.cim = "Ismétlés";
   $scope.nevek = [
     "Gábor", 
     "János", 
     "Mária",
   ];
});

Változók

Néhány beépített változót használhatunk az ngRepeat mellett, úgy minta $index, $first, $last, $middle, $even, stb. A beépített változók „$”-jel karakterrel kezdődnek.

A következő változók használhatók:

változó	típus	leírás
$index	szám	az elemek száma
$first	logikai	igaz, ha első elem
$last	logikai	igaz, ha utolsó elem
$middle	logikai	igaz, ha középső elem
$even	logikai	igaz, ha az elem egész
$odd	logikai	igaz, ha az elem páratlan

Ismételt érték

Ha egy érték ismétlődik, akkor a fenti megoldásunk nem működik, mivel az értékeket kulcsnak tekinti az Angular. Ezért meg kell jelölnünk egy másik kulcsot.

<!DOCTYPE html>
<html ng-app="egy">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ismétlés</title>
 
</head>
<body ng-controller="egyCtrl">
 
  <h2 ng-bind="cim"></h2>
  <ul>
    <li ng-repeat="nev in nevek track by $index">{{nev}}</li>    
  </ul>
 
 
<script src="angular.min.js"></script>  
<script>  
 
var egy = angular.module('egy', []);
 
egy.controller('egyCtrl', function($scope){
   $scope.cim = "Ismétlés";
   $scope.nevek = [
     "Gábor", 
     "János", 
     "Mária",
     "János"
   ];
});

Többrészes adat

<!DOCTYPE html>
<html ng-app="egy">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ismétlés</title>
 
</head>
<body ng-controller="egyCtrl">
 
  <h2 ng-bind="cim"></h2>
  <ul>
    <li ng-repeat="ember in emberek">
      {{ember.nev}} -
      {{ember.telepules}}
    </li>    
  </ul>
 
 
<script src="angular.min.js"></script>  
<script>  
 
var egy = angular.module('egy', []);
 
egy.controller('egyCtrl', function($scope){
   $scope.cim = "Ismétlés";
   $scope.emberek = [
     { az:1, nev:"Gábor", telepules:"Miskolc"}, 
     { az:2, nev:"János", telepules:"Szolnok"}, 
     { az:3, nev:"Mária", telepules:"Szeged"},
     { az:4, nev:"János", telepules:"Szolnok"}
   ];
});
 
 
</script>  
</body>
</html>

Többszörös érték még egyszer

<!DOCTYPE html>
<html ng-app="egy">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ismétlés</title>
 
</head>
<body ng-controller="egyCtrl">
 
  <h2 ng-bind="cim"></h2>
  <ul>
    <li ng-repeat="ember in emberek">
      {{ember.nev}} -
      {{ember.telepules}} -
      {{ember.fizetes}}
    </li>    
  </ul>
 
 
<script src="angular.min.js"></script>  
<script>  
 
var egy = angular.module('egy', []);
 
egy.controller('egyCtrl', function($scope){
   $scope.cim = "Ismétlés";
   $scope.emberek = [
     { 
       az:1, 
       nev:"Gábor", 
       telepules:"Miskolc",
       fizetes:370000.0
     },{
       az:2,
       nev:"János",
       telepules:"Szolnok",
       fizetes: 980000.0
     },{
       az:3,
       nev:"Mária",
       telepules:"Szeged",
       fizetes: 532000.0
     },{
       az:4,
       nev:"János",
       telepules:"Szolnok",
       fizetes: 475000.0
     }
   ];
});
 
 
</script>  
</body>
</html>

Az adatok előkészítése HTML oldalon

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ismétlés</title>
<script src="angular.min.js"></script>  
</head>
<body ng-init="nevek=['Mária', 'Katalin', 'Ferenc']">
 
<ul>
  <li ng-repeat="nev in nevek">{{nev}}</li>
</ul>
 
</body>
</html>

De még az ng-init sem szükséges:

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ismétlés</title>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>  
</head>
<body>
 
<ul>
  <li ng-repeat="nev in ['Mária', 'Katalin', 'Ferenc']">{{nev}}</li>
</ul>
 
</body>
</html>

Egyező adatok újra

<!DOCTYPE html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ismétlés</title>
<script src="angular.min.js"></script>  
</head>
<body>
 
<ul>
  <li ng-repeat="nev in ['Mária', 'Katalin', 'Mária'] track by $index">{{nev}}</li>
</ul>
 
</body>
</html>

<ul>
  <li ng-repeat="ember in emberek track by ember.az">{{nev}}</li>
</ul>

Példák

Példa 01

index.html

<!doctype html>
<html ng-app="csoport">
<head>
<meta charset="utf-8">
<title>SWBin</title>
 
</head>
<body ng-controller="csoportCtrl">
 
<h3>Csoport tagok</h3>
<table>
    <thead>
        <tr>
            <th></th>
        </tr>        
    </thead>
    <tbody>
        <tr ng-repeat="tag in tagok">
            <td>{{tag.nev}}</td>            
        </tr>        
    </tbody>
</table>
 
 
<script src="http://code.angularjs.org/1.2.8/angular.min.js"></script>
<script>
var csoport = angular.module("csoport", []);
csoport.controller("csoportCtrl", function($scope){
   $scope.tagok = [
        {nev: 'Jóska'},
        {nev: 'Pista'},
        {nev: 'Kati'},
        {nev: 'Mari'}
        ];
});
</script>
 
</body>
</html>