JSFiddle - React, Tailwind, and code Playground

by Şuayip Ekmekci

HTML

<!-- ex1-8 (silinenleri listeleme) -->
<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>
		<div ng-repeat="(deneme1,deneme2) in ornekOlsun">
			<input type="checkbox" ng-model="deneme2.have">
			<span class="ornekclass{{deneme2.have}}">{{deneme1}} = {{deneme2.text}} <a ng-click="silmeFonksiyonu($index)">sil</a></span>
		</div>
		<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.silinenler = []; // silinenleri tutacağım array
	$scope.ornekOlsun = [ // ilk listemiz
		{text:'Lorem', have:true},
		{text:'Lorem-1', have:false},
		{text:'Lorem-2', have:false},
		{text:'Lorem-3', have:true},
		{text:'Lorem-4', have:false},
		{text:'Lorem-5', have:false},
		{text:'Lorem-6', have:true},
		{text:'Lorem-7', have:false},
		{text:'Lorem-8', 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.liste = function(parametremiz) {
		var toplamListe = $scope.ornekOlsun;
		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;
		}else{
			$scope.ornekOlsun = $scope.ilkListem;
		}
	};
}