Question

我有这张桌子和一个不赞成的按钮。这个不赞成按钮基本上做的是它为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?']
        };
    }]);

Answer 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>

如何根据角度值隐藏表格列？

1 个答案: