English
ng-repeat Directive
The ng-repeat directive is one of the most used directives by developers, with the flexibility it needs to use. ng-repeat is a repeater directive that creates an array value provided by $ scope for each array element according to the DOM object structure used.
In our example, for our control method, we created an array named listArray and inserted 3 string elements into it. After defining the element li as a repetitive element in the DOM, we put the elements in the listArray in the ng-repeat directive into the vegetable variable for each iteration (repeat), as "singular in Expression lm". We gave this variable as an expression reflection. Let's create a shopping list application based on this logic, and let's examine my codes again:
In our example, for our control method, we created an array named listArray and inserted 3 string elements into it. After defining the element li as a repetitive element in the DOM, we put the elements in the listArray in the ng-repeat directive into the vegetable variable for each iteration (repeat), as "singular in Expression lm". We gave this variable as an expression reflection. Let's create a shopping list application based on this logic, and let's examine my codes again:
Türkçe
ng-repeat Direktifi
ng-repeat direktifi, gerek kullanımı gerekse sunduğu esneklik ile geliştiriciler tarafından en çok kullanılan direktiflerden birisi. ng-repeat, $scope tarafından sunulan bir array değerini, kullanıldığı DOM objesi yapısına göre her array elemam için oluşturan bir tekrarlayıcı direktiftir.
Kullanımını, kontrol metodunda tanımlayacağımız basit bir array ile göstermeye çalışalım;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
En sevdiğim sebzeler;<br>
<ul class="sayfaTasiyici">
<li ng-repeat="sebze in listeArray">
{{sebze}}
</li>
</ul>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.listeArray = ["Patates", "Domates", "Patlıcan"];
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
Meyveler Çeşitleri;<br>
<ul class="sayfaTasiyici">
<li ng-repeat="meyveler in listeArray">
{{meyveler}}
</li>
</ul>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.listeArray = ["Elma", "Armut", "Muz", "Portakal", "Kivi", "Mandalina", "Çilek", "Erik", "Şeftali", "Kayısı", "Kiraz", "Vişne"];
});
</script>
</body>
</html>
Örneğimizde, kontrol metodumuz için de, listeArray isimli bir array oluşturup, içerisine 3 string elemam girdik. DOM'da li elementini tekrar edecek yapı olarak belirlekten sonra, ng-repeat direktifi içerisinde "tekilIsim in Expressionlsmi" olmak üzere listeArray içindeki elemanları her bir repeat (tekrar) için sebze değişkenine attık. Bu değişkenini de içerisinde expression yansıması olarak sunduk. İsterseniz bu mantığl temel alarak bir alışveriş listesi uygulaması oluşturalım ve yine kodlarım inceleyelim:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<style>
.sayfaTasiyici { border:1px solid #eee; padding:10px; }
li { list-style:none; }
li span { font-size:13px; color:#aaa; }
</style>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
Alışveriş Listem;<br>
<ul class="sayfaTasiyici">
<li ng-repeat="alinacak in alisverisListesi">
{{alinacak}} <span ng-click="kaldir($index)">(Kaldır)</span>
</li>
</ul>
<input type="text" ng-model="eklenecek"/><br>
<button ng-click="ekle()">Alınacağı Ekle</button>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.eklenecek = "";
$scope.alisverisListesi = ["Patates"];
/* Eklenecek inputunu bağlamak için bir string değişkeni
ve ayrıca listeyi tutmak için bir array değişkeni
oluşturduk */
$scope.ekle = function(){
$scope.alisverisListesi.push($scope.eklenecek);
$scope.eklenecek = "";
};
/* Ekleme fonksiyonunda, geçerli eklenecek değişkeni
değerini push array metodu ile array'e ekliyor ve
eklenecek değişkenini sıfırlıyoruz.
Burada array'e yeni eleman push edildiği anda, repeat
listesinin de güncellendiğini görebilirsiniz. */
$scope.kaldir = function(kaldirilacak){
$scope.alisverisListesi.splice(kaldirilacak, 1);
};
});
</script>
</body>
</html>
Örneğimizde, fonksiyonel bir alışveriş listesi uygulamasını görebilirsiniz. İsterseniz bu uygulamada, kullanıcının yaptığı işlemleri kayıt altına alan ve yine ng-repeat ile gösteren bir ekleme yaparak sistemi geliştirelim;
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<style>
.sayfaTasiyici {
border:1px solid #eee;
padding:10px; }
li {
list-style:none;
}
li span {
font-size:13px;
color:#aaa;
}
</style>
</head>
<body>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
Alışveriş Listem;<br>
<ul class="sayfaTasiyici">
<li ng-repeat="alinacak in alisverisListesi">
{{alinacak}} <span ng-click="kaldir($index)">(Kaldır)</span>
</li>
</ul>
<input type="text" ng-model="eklenecek"/><br>
<button ng-click="ekle()">Alınacağı Ekle</button><hr>
Yapılan işlemler;
<ul>
<li ng-repeat="islem in islemler">{{islem}}</li>
</ul>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope){
$scope.eklenecek = "";
$scope.alisverisListesi = ["Patates"];
$scope.islemler = ["Uygulama yüklendi"];
$scope.ekle = function(){
$scope.alisverisListesi.push($scope.eklenecek);
$scope.islemler.push($scope.eklenecek + " eşyası listeye eklendi");
$scope.eklenecek = "";
};
$scope.kaldir = function(kaldirilacak){
$scope.islemler.push($scope.alisverisListesi[kaldirilacak] + " eşyası listeden kaldırıldı");
$scope.alisverisListesi.splice(kaldirilacak, 1);
};
});
</script>
</body>
</html>
Bu örneğimizde de bir uygulama içerisindeki iki farklı array için iki farklı ng-repeat elementi kullanımını görebilirsiniz.
Posted on Utopian.io - Rewarding Open Source Contributors