我有这张桌子和一个不赞成的按钮。这个不赞成按钮基本上做的是它为db中的is_approved列设置一个布尔值。如果我按下不批准按钮,它将使值为0,如果我按下重新批准按钮,它将使值为1.我想要做的是当我按下不批准按钮我不想在表格中显示该行。有没有办法可以做到这一点?以下是我的代码 -
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?']
};
}]);
答案 0 :(得分:1)
您可以使用ng-show指令显示/隐藏记录行。只需将此指令添加到重复的tr:ng-show =“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>