Angular To-Do list

Angular to-do list örneği

by Şuayip Ekmekci

HTML

<!-- ex1-9(son) -->
<body ng-app>
    <div ng-controller="MyCtrl">
		<div ng-click="liste('HaveFalseListesi')">Have false olanları listele</div>
		<div ng-click="liste('HaveTrueListesi')">Have true olanları listele</div>
		<div ng-click="liste('silinenlerListesi')">Silinenleri listele</div>
		<div ng-click="liste('fullListe')">ilk liste</div>
		<br>
		ara: <input ng-model='arama'>
		<br>
		<div ng-repeat="(deneme1,deneme2) in ornekOlsun | filter:arama">
			<input type="checkbox" ng-change="changeList($index)" ng-model="deneme2.have">
			<span class="ornekclass{{deneme2.have}}">{{deneme1}} = {{deneme2.text}} <a ng-click="silmeFonksiyonu($index)" ng-show="silShowConrol">sil</a><a ng-click="gerialFonksiyonu($index)" ng-show="addShowConrol">geri al</a></span>
		</div>
		<br>
		<span ng-modal="denememmm">{{ornekOlsun.length}} liste elemanı içerisinden, arama sonucun da {{(ornekOlsun|filter:arama).length}}  listelendi</span>
		<br>
		<form ng-submit="eklemeFonksiyonu()">
			<input type="text" ng-model="buradakiInputDegeriniEkle" autofocus  size="30" placeholder="Eklemek istediğiniz metni girin">
			<input class="btn-primary" type="submit" value="Ekle">
		</form>
	</div>
</body>

CSS

.ornekclasstrue{
    text-decoration: line-through;
    color: #c0c0c0;
}

.ornekclassfalse{
    text-decoration: underline;
    color: #D30000;
}

JavaScript

function MyCtrl($scope){
	$scope.pageConrol = "fullListe";
	$scope.silShowConrol = true;
	$scope.addShowConrol = false;
	$scope.silinenler = []; // silinenleri tutacağım array
	$scope.ornekOlsun = [ // ilk listemiz
		{text:'Lorem', have:true},
		{text:'ipsum', have:false},
		{text:'dolor', have:false},
		{text:'sit', have:true},
		{text:'amet', have:false},
		{text:'consectetur', have:false},
		{text:'adipiscing', have:true},
		{text:'elit', have:false},
		{text:'Curabitur', have:false},
	];

	$scope.ilkListem = $scope.ornekOlsun;

	$scope.eklemeFonksiyonu = function() {
		$scope.ornekOlsun.push({text:$scope.buradakiInputDegeriniEkle, have:false});
		$scope.buradakiInputDegeriniEkle = '';
	};

	$scope.silmeFonksiyonu = function(index) {
		$scope.silinenler.push($scope.ornekOlsun[index]);
		$scope.ornekOlsun.splice(index, 1);
	};
	
	$scope.gerialFonksiyonu = function(index) {
		$scope.ilkListem.push($scope.silinenler[index]);
		$scope.silinenler.splice(index, 1);
		
	};
	
	$scope.liste = function(parametremiz) {
		$scope.pageConrol = parametremiz;
		$scope.silShowConrol = true;
		$scope.addShowConrol = false;
		if(parametremiz == "HaveFalseListesi"){
			$scope.ornekOlsun = [];
			angular.forEach($scope.ilkListem, function(haveControl) {
				if (!haveControl.have) $scope.ornekOlsun.push(haveControl);
			});
		}else if(parametremiz == "HaveTrueListesi"){
			$scope.ornekOlsun = [];
			angular.forEach($scope.ilkListem, function(haveControl) {
				if (haveControl.have) $scope.ornekOlsun.push(haveControl);
			});
		}else if(parametremiz == "silinenlerListesi"){
			$scope.ornekOlsun = $scope.silinenler;
			$scope.silShowConrol = false;
			$scope.addShowConrol = true;
		}else{
			$scope.ornekOlsun = $scope.ilkListem;
		}
	};
	
	$scope.changeList = function(id) {
		if($scope.pageConrol != "fullListe" & $scope.pageConrol != "silinenlerListesi"){
			$scope.ornekOlsun.splice(id, 1);
		}
	};
}