whenever I submit or delete one records, the animation moves all the record instead of one. I do understand that show_data function is the cause of the issue. Is there any solution that it only animates newly insert/delete a record? I have tried adding a sub-array to store temp data and display it without calling show_data. But I believe this is not a good practice.

<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>Testing</title>

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>

 <style>
  .foodie {
   overflow: hidden;
  }

  .foodie.ng-enter {
   transition: 0.5s linear all;
   opacity: 0;
  }

  
  .foodie.ng-enter.ng-enter-active {
   opacity: 1;
  }


  .foodie.ng-leave {
   transition: 0.5s linear all;
   transform: translateX(0);
   opacity: 1;
  }

  
  .foodie.ng-leave.ng-leave-active {
   transform: translateX(-100%);
   opacity: 0;
  }
 </style>

</head>

<body ng-app="myapp" ng-controller="myCtrl" ng-init="show_data()">

 <div class="container">
  <div class="row">
   <div class="col-6">
    
    <div class="jumbotron" style="margin-top:50px;">
     <h1 class="display-4">Display Food</h1>
     <hr class="my-4">

     <ul class="list-group">
      <li class="list-group-item d-flex justify-content-between align-items-center foodie"
       ng-repeat="item in foods | orderBy :'price'">
       {{item.name}}
       <footer class="blockquote-footer">${{item.price}}</footer>
       <span class="badge badge-danger" ng-click="remove_data(item.id)">Remove</span>
      </li>
     </ul>
    </div>

   </div>
   <div class="col-6">
    
    <div class="jumbotron" style="margin-top:50px;">
     <h1 class="display-4">Enter Food</h1>
     <hr class="my-4">

     <form>
      <div class="form-group">
       <label for="example1">Food Name</label>
       <input type="text" class="form-control" id="example1" ng-model="foodName">
      </div>
      <div class="form-group">
       <label for="example2">Price $</label>
       <input type="text" class="form-control" id="example2" ng-model="foodPrice">
      </div>
     </form>
     <button type="button" ng-click="insert_food()" class="btn btn-primary float-right">Add</button>

    </div>

   </div>
  </div>
 </div>

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
 </script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
 </script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
 </script>

 <script>
  var app = angular.module("myapp", ['ngAnimate']);
  app.controller('myCtrl', function ($http, $scope) {

   $scope.show_data = function () {
    $http.get("viewData.php")
     .then(function (response) {
      $scope.foods = response.data;
     });
   }


   $scope.insert_food = function () {
    $http.post("action.php", {
      'name': $scope.foodName,
      'price': $scope.foodPrice,
      'requestNo': 1
     })
     .then(function (response) {
      $scope.foodName = null;
      $scope.foodPrice = null;
      $scope.show_data();
     })

   };

   $scope.remove_data = function (id) {
    $http.post("action.php", {
      'id': id,
      'requestNo': 2
     })
     .then(function (response) {
      $scope.show_data();
     })
   }

  });
 </script>
</body>

</html>

0 Answers