<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> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script> <div class="container" ng-app="myapp" ng-cloak ng-controller="mycontrol" > <div class="col-xs-12 col-sm-offset-3 col-sm-6"> <div class="row"><h3 id="mesaj" class="well">AngularJS is Very Simple! Try!</h3></div> </div> <div class="row"> <div class="col-xs-12 col-sm-offset-3 col-sm-6" style="margin-top: 10px;" > <div class="panel panel-default"> <div class="row"> <div class="col-xs-12"> <div class="panel-heading"><b ng-show="results.length">Sonuç {{results.length}}</b><b ng-hide="results.length">Yook.</b></div> <div class="input-group"> <input type="text" ng-model="deger" ng-keydown="$event.keyCode==13 ? ekle(): eylem() " class="form-control" id="contact-list-search"> <span class="input-group-btn"> <button class="btn btn-default" type="button" ng-click="ekle()" ng-disabled="results.length !== 0" ><span class="glyphicon glyphicon-plus text-muted"></span></button> </span> </div> </div> </div> <ul class="list-group" id="contact-list"> <li ng-repeat="data in veriler | filter : deger as results" class="list-group-item"> <div class="col-xs-3 col-sm-3"> <img ng-src="{{data.imagefile}}" alt="Scott Stevens" class="img-responsive img-circle" /> </div> <div class="col-xs-6 col-sm-6"> <span class="name">{{$index+1}}. {{data.name}}</span><br/> <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" title="5842 Hillcrest Rd"></span> <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" title="(870) 288-4149"></span> <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" title="scott.stevens@example.com"></span> </div> <div class="col-xs-3 col-sm-3"> <span><button ng-click="sil($index)" class="btn btn-primary pull-right">Delete!</button></span> </div> <div class="clearfix"></div> </li> </ul> <button ng-hide="results.length!==0" ng-click="ekle()" class="btn btn-info btn-block btn-lg">No item! do you want to add?</button> </div> </div> </div><!-- row --> </div>

.ng-enter { transition: 0.1s linear all; opacity: 0; } .ng-enter-active { opacity: 1; } .ng-leave { transition: 0.1s linear all; opacity: 1; } .ng-leave-active { opacity: 0; }

var app = angular.module("myapp", ['ngAnimate']); app.controller("mycontrol", function($scope, $http) { $scope.veriler = [ {"name":"Naz", "imagefile":"https://i.pinimg.com/736x/27/52/c4/2752c45b7c3bfa90192171439f3a3ee0--monkey-primates.jpg"}, {"name":"Muhittin", "imagefile":"https://i.pinimg.com/236x/bf/42/85/bf42855d50f2a491e26344c1b9683527.jpg"}, {"name":"Ayşe", "imagefile":"https://i.pinimg.com/236x/ac/2d/dc/ac2ddceb9076a7d9933061e382bf007e--moth-caterpillar.jpg"}, {"name":"Naz", "imagefile":"https://i.pinimg.com/236x/98/02/06/9802062cad1783945fe22015bf331683.jpg"}, {"name":"Davut/David", "imagefile":"https://i.pinimg.com/736x/27/52/c4/2752c45b7c3bfa90192171439f3a3ee0--monkey-primates.jpg"} ]; //$scope.kactane = $scope.veriler.length; $scope.eylem =function(){ } $scope.ekle = function() { if ($scope.deger.trim().length === 0){ alert("data girin!"); $scope.deger = ""; } else { var dizi = { "name" : $scope.deger , "imagefile": "https://qsf.ec.quoracdn.net/-3-images.new_grid.profile_pic_default_small.png-26-902da2b339fedf49.png" }; $scope.veriler.push(dizi); $scope.veriler = $scope.veriler.filter(function(a){ return a; }); angular.element(mesaj).html("<font color=red>inserted</red>"); $scope.deger = ""; } } $scope.sil = function(ind){ $scope.veriler.splice(ind, 1); $scope.kactane = $scope.veriler.length; } });