AngularJS ile ToDoList Uygulaması

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

Görev Listem

No Görev Gün Durum İşlem
{{$index + 1}} {{ item.gorev }} {{ item.gun }} {{ item.durum }} x Kaldır
Pazartesi Salı Çarşamba Perşembe Cuma Cumartesi Pazar Tamamlanmadı Devam Ediyor Tamamlandı + Ekle

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);
     };
 });

//jsfiddle.net/rdqg8rju/embedded/result,js,html/

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

</div>

//jsfiddle.net/rdqg8rju/1/embedded/result,html/

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;
    }
});

//jsfiddle.net/fnLt97x9/embedded/result,html/

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

0.0 Ort. (0% puan) - 0 oy

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir