如何隱藏基於值角度的表格列？

Question

我有這個表格和一個按鈕來拒絕。這個不贊成按鈕的基本功能是爲db中的is_approved列設置一個布爾值。如果我按下不批准按鈕，它將使值爲0，如果我按重新批准按鈕，它會使值爲1.我想要做的是當我按下不批准按鈕，我不想在表中顯示該行。有沒有辦法可以做到這一點？下面是我codes-

HTML -

<div class="container-fluid" ng-controller="TablesTripsController"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <h1>Trips</h1> 

       <table class="table"> 
        <thead> 
         <tr> 
          <th ng-repeat="heading in data.headings">{{heading}}</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr ng-repeat="trip in trips" ng-click="selTrip(trip)"> 
          <td>{{trip.id}}</td> 
          <td>{{trip.from}}</td> 
          <td>{{trip.to}}</td> 
          <td>{{trip.hour}}</td> 
          <td>{{trip.minute}}</td> 
          <td>{{trip.ride_reg}}</td> 
          <td>{{trip.ride_contact_no}}</td> 
          <td>{{trip.ride_driver_name}}</td> 
          <td>{{trip.pickup_address}}</td> 
          <td>{{trip.dropoff_address}}</td> 
         </tr> 

        </tbody> 
       </table> 
      </div> 
     </div> 
     <div class="row"> 
     <div class="col-xs-12"> 
      <h1>Reservations</h1> 

       <table class="table"> 
        <thead> 
         <tr> 
          <th ng-repeat="heading in data1.headings">{{heading}}</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr ng-repeat="reservation in reservations"> 
          <td>{{reservation.id}}</td> 
          <td>{{reservation.user.fb_id}}</td> 
          <td>{{reservation.user.name}}</td> 
          <td>{{reservation.user.phone}}</td> 
          <td>{{reservation.user.email}}</td> 
          <td>{{reservation.day}}/{{reservation.month}}/{{reservation.year}}</td> 
          <td> 
           <button ng-click="disapprove(reservation, 0)" ng-show="reservation.is_approved">Disapprove</button> 
           <button ng-click="disapprove(reservation, 1)" ng-show="!reservation.is_approved">Approve</button> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 

</div> 

控制器 -

.controller('TablesTripsController', ['$scope', '$http', 'AuthService', '$location', function($scope, $http, AuthService, $location) { 
     'use strict'; 

     if (!AuthService.getLoggedIn()) { 
      $location.path('/login'); 
     } 

     $scope.trips = []; 
     $http.get('/api/trips').success(function(response) { 

      $scope.trips= response.trips; 
     }); 
     $scope.data = { 
      headings: ['Id', 'From', 'To', 'Hour', 'Minute', 'Reg No.', 'Contact', 'Driver Name','Pick Up', 'Drop Off'] 
     }; 
     $scope.selTrip= function(trip){ 
      $scope.reservations = []; 

      $http.get('/api/trips/'+trip.id+'/reservations').success(function(response) { 
       $scope.reservations = response.reservations; 
      }); 
     }; 
     $scope.disapprove= function(reservation, yesno){ 
      $scope.approvereservations = true; 
      $http.get('/api/admin/reservations/'+ reservation.id+'/'+yesno).success(function(response) { 
       reservation.is_approved = yesno; 
       console.log(reservation, reservation.is_approved, typeof reservation.is_approved) 
       // $scope.approvereservations= response.reservations.is_approved; 
      }); 
     }; 

     $scope.data1 = { 
      headings: ['Reservation ID','User ID', 'User Name', 'User Phone', 'User Email', 'Date','Approve?'] 
     }; 
    }]); 

Answer 1

可以使用NG-顯示指令，顯示/隱藏的記錄行。就在這個指令添加到repeting TR：NG-秀= 「reservation.is_approved」

見下

<tr ng-repeat="reservation in reservations" ng-show="reservation.is_approved"> 
         <td>{{reservation.id}}</td> 
         <td>{{reservation.user.fb_id}}</td> 
         <td>{{reservation.user.name}}</td> 
         <td>{{reservation.user.phone}}</td> 
         <td>{{reservation.user.email}}</td> 
         <td>{{reservation.day}}/{{reservation.month}}/{{reservation.year}}</td> 
         <td> 
          <button ng-click="disapprove(reservation, 0)" ng-show="reservation.is_approved">Disapprove</button> 
          <button ng-click="disapprove(reservation, 1)" ng-show="!reservation.is_approved">Approve</button> 
         </td> 
        </tr>