Bootstrap Snippet Angularjs checkbox check and delete! using HTML Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 -->   
                    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 ;
         }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Angularjs checkbox check and delete!"
Bootstrap 3.0.0 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"Angularjs checkbox check and delete!" Bootstrap 3.0.0 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"Angularjs checkbox check and delete!"
Bootstrap 3.0.0 Snippet by muhittinbudak