AngularJS ile ToDoList Uygulaması

  • 16.01.2017
  • M.Tayyip Yetiş
  • AngularJS

Merhaba arkadaşlar, AngularJS derslerinin bir serisi olarak yazdığım bu makaleyi bir örnek üzerinden ilerleteceğim. AngularJS ile ilgili giriş makalesini Buradan okuyabilirsiniz. Örnekte bir görev listesi (ToDoList) uygulaması yapacağız. basit işlevlere sahip olacak bu uygulamada "görev, gün ve durum" değerlerini tutacağız. Her bir durum için icon göstereceğiz

Bu uygulamada angularjs module, controller, ng-repeater, ng-switch ve fonksiyon kullanımı kavramlarını kullanacağız.

HTML

<div ng-app="myApp" ng-controller="myCtrl">
<h3>Görev Listem</h3>
 <table border="1" cellpadding="5">
  <thead>
	 <tr>
	   <th>No</th>
	   <th>Görev</th>
	   <th>Gün</th>
	   <th>Durum</th>
	   <th>İşlem</th>
	 </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in items">
	  <td>{{$index + 1}}</td>
	  <td>{{ item.gorev }}</td>
	  <td>{{ item.gun }}</td>
	  <td>{{ item.durum }}</td>
	  <td><button ng-click="RemoveFunction($index)">x Kaldır</button></td>
    </tr>
	<tr>
	   <td></td>
	   <td><input type="text" placeholder="Görev..." ng-model="newItem.baslik"/></td>
	   <td>
	     <select ng-model="newItem.gun">
		   <option>Pazartesi</option>
		   <option>Salı</option>
		   <option>Çarşamba</option>		   
		   <option>Perşembe</option>		   
		   <option>Cuma</option>		   
		   <option>Cumartesi</option>		   
		   <option>Pazar</option>		   		   
	     </select>
	   </td>
	   <td>
	     <select ng-model="newItem.durum">
		   <option>Tamamlanmadı</option>
		   <option>Devam Ediyor</option>
		   <option>Tamamlandı</option>		   
	     </select>	   
	   </td>
	  <td><button ng-click="AddFunction(newItem)">+ Ekle</button></td>	
	</tr>
  </tbody>
 </table>
</div>

AngularJS Script

 var app = angular.module("myApp", []);
 app.controller("myCtrl", function($scope) {
     $scope.items = [{
             gorev: 'AngularJS dersleri izlenecek',
             gun: 'Pazartesi',
             durum: 'Tamamlanmadı'
         },
         {
             gorev: 'E-Ticaret projesi teslim edilecek',
             gun: 'Cumartesi',
             durum: 'Devam Ediyor'
         },
         {
             gorev: 'Bankaya para yatırılacak',
             gun: 'Pazar',
             durum: 'Tamamlandı'
         }
     ];
     $scope.AddFunction = function(item) {
         $scope.items.push({
             gorev: item.baslik,
             gun: item.gun,
             durum: item.durum
         });
         item.baslik = "";
         item.gun = "";
         item.durum = "";
     };
     $scope.RemoveFunction = function(index) {
         $scope.items.splice(index, 1);
     };
 });

Uygulamamıza icon ekleyerek daha belirgin hale getirelim. Bunun için aşaağıdaki gibi bir switch yapısı kullanabiliriz.

<div ng-switch on="item.durum">
   <div ng-switch-when="Tamamlanmadı">
      <img src="https://image.freepik.com/free-vector/red-green-ok-not-ok-icons_17-1106090017.jpg"/>
   </div>
   <div ng-switch-when="Devam Ediyor">
      <img src="http://www.freeiconspng.com/uploads/ok-icon-png-23.png"/>
   </div>
   <div ng-switch-when="Tamamlandı">
      <img src="http://www.freeiconspng.com/uploads/ok-icons-3-png-27.png"/>
   </div>
</div>

Uygulamamızı biraz daha geliştirerek her satır için inline (satır içi) düzenleme özelliği ekleyelim. AngularJS kodumuz aşağıdaki gibi olacaktır.

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.items = [{
            gorev: 'AngularJS dersleri izlenecek',
            gun: 'Pazartesi',
            durum: 'Tamamlanmadı'
        },
        {
            gorev: 'E-Ticaret projesi teslim edilecek',
            gun: 'Cumartesi',
            durum: 'Devam Ediyor'
        },
        {
            gorev: 'Bankaya para yatırılacak',
            gun: 'Pazar',
            durum: 'Tamamlandı'
        }
    ];
    $scope.AddFunction = function(item) {
        $scope.items.push({
            gorev: item.baslik,
            gun: item.gun,
            durum: item.durum
        });
        item.baslik = "";
        item.gun = "";
        item.durum = "";
    };
    $scope.SaveFunction = function(item, index) {
        $scope.items[index] = {
            gorev: item.gorev,
            gun: item.gun,
            durum: item.durum
        };
    }
    $scope.RemoveFunction = function(index) {
        $scope.items.splice(index, 1);
    };
    $scope.isSelected = function(row) {
        if (row == undefined) return false;
        return $scope.selected_row === row;
    }
    $scope.EditFunction = function(row) {
        $scope.EditingItem = row;
        $scope.selected_row = row;
    }
    $scope.CancelFunction = function(row) {
        $scope.selected_row = null;
    }
});

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

Yorum Yap