ben

OMÜ , Bilgisayar Mühendisliği, 13'

31 Ekim 2018 Çarşamba

Telefon Defteri Uygulaması


Scope liste üzerinden crud işlemi





<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Sutuna Göre Sırala</title>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
</head>
<body ng-controller="kisiCtrl">
<div>
<form>
<label>İsim</label> <input type="text" name="isim" ng-model="kisi.isim" /> <br />
<label>Soy İsim</label><input type="text" name="soyisim" ng-model="kisi.soyisim" /> <br />
<label>Email</label> <input type="text" name="email" ng-model="kisi.email" /> <br />
<label>Telefon</label> <input type="text" name="telefon" ng-model="kisi.telefon" /> <br />
<br />
<input type="button" value="ekle" ng-disabled="kisi.id!=null" ng-click="ekle()" />
<input type="button" value="guncelle" ng-disabled="kisi.id==null" ng-click="guncelle()" />
</form>
<table>
<thead>
<tr>
<th>id</th>
<th>isim</th>
<th>Soyisim</th>
<th>email</th>
<th>telefon</th>
<th>islem</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="kisi in liste">
<td>{{kisi.id}}</td>
<td>{{kisi.isim}}</td>
<td>{{kisi.soyisim}}</td>
<td>{{kisi.email}}</td>
<td>{{kisi.telefon}}</td>
<td>
<a href="#" ng-click="duzenle(kisi)" >düzenle</a> |
<a href="#" ng-click="sil(kisi.id)" >sil</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>

<script>
var modul=angular.module('myApp',[]);

modul.controller("kisiCtrl",function($scope,kisiService){
$scope.liste=kisiService.listeGonder();
$scope.ekle=function(){
if ($scope.kisi!=null)
{
kisiService.ngEkle($scope.kisi)
$scope.kisi=null
}else{
alert("lutfen kisi bilgilerini gir");
$scope.kisi=null
}
}
$scope.guncelle=function(){
kisiService.ngGuncelle($scope.kisi);
$scope.kisi=null
}
$scope.sil=function(id){
kisiService.ngSil(id);
}
$scope.duzenle=function(kisi){
$scope.kisi=angular.copy(kisi);
}
})


modul.service("kisiService",function(){
var kisiListe=[{id:0,"isim":"Esra","soyisim":"salman","email":"esra@gmail.com","telefon":"0253658969"},
{id:1,"isim":"Fatih","soyisim":"akın","email":"fatih@gmail.com","telefon":"0253658970"}]
var id=2;
this.listeGonder=function(){
return kisiListe;
}
this.ngSil=function(kid){
for (i in kisiListe){
if( kisiListe[i].id==kid){
kisiListe.splice(i,1);
id=id-1;
break;}}}
this.ngGuncelle=function(kisi){
for (i in kisiListe){
if( kisiListe[i].id==kisi.id){
kisiListe[i]=kisi;
break;
}}}
this.ngEkle=function(kisi)
{
kisi.id=id++;
kisiListe.push(kisi)
}})

</script>
</html>

Hiç yorum yok: