ng-model: Form validasyonlarında girilen bilgilerin validate edilmesi için köprü görevi görür.İnput nesnesini scope’a bağlar
ng-disabled: Elementleri disable etmek için kullanılır.
ng-include: Html parçalarını compile edip uygulamanın içine ekler. Partial template için kullanılabilir
örnek:
İndex.html
<!DOCTYPE
html>
<html
ng-app>
<head>
<link
rel="stylesheet"
href="style.css">
<script
src="https://code.angularjs.org/1.3.9/angular.js"></script>
</head>
<body>
<div
ng-include="'anasayfa.html'"></div>
</body>
</html>
anasayfa.html
<h1>anasayfa
include
edildi</h1>
ng-switch: Template içinde bir nevi conditional işlem yapmak gibidir.
uygulama:
<html>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body>
<div
ng-app="girisApp" ng-controller="loginCtrl">
<button ng-click="formDegistir('form1')">TC ile
Giriş</button>
<button ng-click="formDegistir('form2')">Hesap No ile
Giriş</button>
<hr/>
<form
name="giris">
<div
ng-switch on="login">
<div
ng-switch-default>Giriş yapmak istediğiniz
yöntemi seçiniz</div>
<div
ng-switch-when="form1">
TC
No: <input
type="text"
ng-model='tc'
required/><br>
</div>
<div
ng-switch-when="form2">
Hesap
No: <input
type="text"
ng-model='hesap'
required/><br>
</div>
<div
ng-hide="genel">
Şifre:
<input
type="text"
ng-model='sifre'
required /><br>
<button ng-click="gonder()" ng-disabled="giris.$invalid">Giriş Yap</button>
</div>
</div>
</form>
</div>
</body>
<script>
var
uygulama = angular.module("girisApp", []);
uygulama.controller("loginCtrl", function($scope){
$scope.genel=1;
$scope.formDegistir = function(hangiform){
$scope.login = hangiform;
$scope.genel=0;
};
$scope.gonder = function(){
alert("Giriş Yapıldı!");
};
});
</script>
</html>
ng-options
Bağlı olduğu select elementinin options’larını listeler.Sadece select elementi için kulanılır.ng-repeat’den daha performanslıdır.
örnek: ng-switch - ng-include - ng-options birlikte kullanım örneği
($scope.items
= ['home',
'setting',
'other'];)
İndex.html
<!DOCTYPE
html>
<html
ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.3.9/angular.js"></script>
</head>
<body >
<div ng-controller="ExampleController">
<select ng-model="selection" ng-options="item
for
item
in items"></select>
<code>selection={{selection}}</code>
<hr/>
<div ng-switch on="selection">
<div ng-switch-when="setting">
<div ng-include="'setting.html'"></div>
</div>
<div ng-switch-when="home">
<div ng-include="'home.html'"></div>
</div>
<div ng-switch-when="other">
<div ng-include="'other.html'"></div>
</div>
</div>
</div>
</body>
<script>
angular.module('myApp', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.items = ['home', 'setting', 'other'];
$scope.selection = $scope.items[0];
}]);
</script>
</html>
ng-show/ng-hide
Gösterme/gizleme işlemi ,Boolean bir değer beklerler. ng-show nesne değeri True ise gösterir.ng-hide, ng-show’un tam tersidir.ng-show false olması durumunda css display özelliği none olacaktır.
ng-if
En güçlü directivelerden biri ,Kendi scope’u var. Directive içerisindeki durum false olduğunda Directive’in iç bölgesindeki kalan tüm node’lar DOM yapısından silinir.
ng-repeat
Modelden gelen verinin listelenmesini sağlar,Kendi scope’unu oluşturur.Gelişmiş for each olarak düşünülebilir.Kendine ait property’leri (özellikleri) var
örnek:
<html
ng-app="donguApp">
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body ng-controller="MainCtrl">
<ul ng-repeat="detail in details">
<li>{{detail.isim}}
<ul ng-repeat="detailed in details.isim">
<li>{{detailed.unvan}}</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var
app
= angular.module('donguApp', []);
app.controller('MainCtrl', function($scope) {
$scope.details = [
{ "isim": "destek" },
{ "isim": "satıs"
}
];
$scope.details.isim = [
{ "unvan": "muhendis" },
{ "unvan": "doktor" }
];
});
</script>
</body>
</html>
Hiç yorum yok:
Yorum Gönder