8 - ng-repeat example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World, AngularJS</title>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var benimapp = angular.module("myapp",[]);
benimapp.controller("mycontroller",function($scope){
$scope.isimler = ["ahmet","mehmet","ali","veli"];
});
</script>
</head>
<body ng-app = "myapp" ng-controller="mycontroller" >
<li ng-repeat="isim in isimler">
{{isim}}
</li>
</ul>
</body>
</html>
9 - ng-repeat & filter - simple searching example - helloAngular7.html
https://www.youtube.com/watch?v=A1YVXKRAGe4&index=4&list=PLO0Gm_zAXCHwHOC7DHExOeLMQiWFxQE3_
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World, AngularJS</title>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var benimapp = angular.module("myapp",[]);
benimapp.controller("mycontroller",function($scope){
$scope.isimler = ["ahmet","mehmet","ali","veli"];
});
</script>
</head>
<body ng-app = "myapp" ng-controller="mycontroller" >
İsim Ara : <input type="text" ng-model="arama">
<ul>
<li ng-repeat="isim in isimler | filter : arama">
{{isim}}
</li>
</ul>
</body>
</html>
<input type="text" ng-model="arama"> input box'ı arama isimli variable'a bağladık. filter : "x" bize x içeren string'leri return eder. Dolayısıyla bu örnekte filter : arama diyerek, input box'a girilen text'i içeren dizi elemanları ekranda gösterilir.
<li ng-repeat="isim in isimler | filter : arama"> : Bu satırı adım adım yorumlayalım:
1 - <li ng-repeat ..> <li> elemanı ng-repeat'e assign edilen şeye göre tekrar tekrar otomatik olarak yazılacaktır. Bu örnekte herbir döngüde isimler array'indeki bir eleman ele alınır.
2 - $scope.isimler = ["ahmet","mehmet","ali","veli"] isimler array'i 4 tane eleman tutuyor. İlk döngüde ahmet ele alınır, yani isim=ahmet olur. ahmet, textbox'a girilen string'i içeriyor mu diye bakılır. İçeriyorsa, <li>ahmet</li> 'nin output'u ekrana yazdırılır.
10 - ng-repeat with array of objects & filter - helloAngular8.html
https://www.youtube.com/watch?v=IC72E5rahJU&list=PLO0Gm_zAXCHwHOC7DHExOeLMQiWFxQE3_&index=5
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World, AngularJS</title>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var benimapp = angular.module("myapp",[]);
benimapp.controller("mycontroller",function($scope){
$scope.veriler = [{"ad":"ahmet","yas":32},
{"ad":"mehmet","yas":12},
{"ad":"elizabeth","yas":23},
{"ad":"mary","yas":21}]; });
</script>
</head>
<body ng-app = "myapp" ng-controller="mycontroller" >
İsim Ara : <input type="text" ng-model="arama">
<ul>
<li ng-repeat="veri in veriler | filter : arama">
Ad : {{veri.ad}} - Yaş : {{veri.yas}} <br>
</li>
</ul>
</body>
</html>
veriler isimli array 4 tane object tutuyor. Input box'a girdiğimiz değer herbir object'in herbir parametresine bakıyor. Örneğin input box'a "a" girdik diyelim, ve veriler array'inin ilk elemanındayız diyelim, bu durumda "ahmet" ve 32, "a" içeriyor mu diye bakılır içeriyorsa li element'i ekranda gösterilir.
No comments:
Post a Comment