<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div class="container" ng-app="myApp" ng-cloak ng-controller="myControl" >
<div class="col-xs-12">
<div class="row"><h3 class="well">AngularJS is Very Simple! Try!</h3></div>
</div>
<div class="row">
<div class="col-xs-6">
<h3 class="well well-sm text-center clearfix">
<button class="btn btn-info pull-left">LEFT</button>IUCN Animals
<button class="btn btn-default pull-right" style="border:none;">{{total}}</button>
</h3>
<button type="button" class="btn btn-danger" ng-click="sil()" >Select Delete</button>
<button type="button" class="btn btn-primary " ng-click="sec()" >Check All</button>
<button type="button" class="btn btn-success" ng-click="kaldir()" >Uncheck All</button>
<ul class="list-group" style="margin-top: 10px;">
<li ng-repeat="data in myDatalar" class="list-group-item">
<div class="checkbox pull-left" >
<label>
<h2><input type="checkbox" ng-model="data.state" value="">{{data.name}} <div class="small"> {{data.state}}</div> </h2>
</label>
</div>
<img ng-src="{{data.image}}" class="img img-thumbnail pull-right" style="width: 100px;" />
<div class="clearfix"></div>
</li><!-- list group item -->
</ul><!-- list group -->
</div><!-- 6 -->
<div class="col-xs-6" ng-show="deletedItems.length == 0" >
<h3 class="well well-sm text-center clearfix">No deleted items!</h3>
</div>
<div class="col-xs-6" ng-show="deletedItems.length > 0" >
<h3 class="well well-sm text-center clearfix">
<button class="btn btn-info pull-left">RIGHT</button>Deleted items
<button class="btn btn-default pull-right" style="border:none;">{{rakam}} item deleted!</button>
</h3>
<ul class="list-group" style="margin-top: 10px;">
<li ng-repeat="delitem in deletedItems" class="list-group-item">
<div class="checkbox pull-left" >
<label>
<h2><input type="checkbox" ng-model="delitem.state" value="">{{delitem.name}} <div class="small">{{delitem.state}}</div></h2>
</label>
</div>
<img ng-src="{{delitem.image}}" class="img img-thumbnail pull-right" style="width: 100px;" />
<div class="clearfix"></div>
</li><!-- list group item -->
</ul><!-- list group -->
</div><!-- 6 -->
</div>
</div><!-- container -->
var benimapp = angular.module("myApp", []);
benimapp.controller("myControl", function($scope) {
$scope.deletedItems = [];
$scope.myDatalar = [
{ "name" : "Monkey", "state": false , "image":"https://i.pinimg.com/736x/27/52/c4/2752c45b7c3bfa90192171439f3a3ee0--monkey-primates.jpg" },
{ "name" : "Chimpanzee", "state": false , "image":"https://i.pinimg.com/236x/bf/42/85/bf42855d50f2a491e26344c1b9683527.jpg" },
{ "name" : "Caterpillar", "state": true , "image":"https://i.pinimg.com/236x/ac/2d/dc/ac2ddceb9076a7d9933061e382bf007e--moth-caterpillar.jpg" },
{ "name" : "Jaguar", "state": false , "image":"https://i.pinimg.com/236x/98/02/06/9802062cad1783945fe22015bf331683.jpg" }
];
$scope.total = $scope.myDatalar.length;
$scope.sec = function(){
$scope.total = $scope.myDatalar.length;
$.each($scope.myDatalar, function(i, dataItem){
$scope.myDatalar[i].state = true;
});
}
$scope.kaldir = function(){
$scope.total = $scope.myDatalar.length;
$.each($scope.myDatalar, function(i, dataItem){
$scope.myDatalar[i].state = false;
});
}
$scope.sil = function(){
$scope.deletedItems = $scope.myDatalar.filter(function(delitem){
return delitem.state == true;
// Must be comparison operator >, <, === , !==, >=, <==
});
$scope.rakam = $scope.deletedItems.length;
$scope.total = $scope.myDatalar.length - $scope.rakam ;
}
});
