Angular button to hide on load based on table row information

Question

I have a table that gets filled with information from the database. It also has a Submit button. If the person on that row respect a certain condition that I check in controller, the button shouldn't appear. How can I do this?

I tried setting up a function that returns true or false but that function will run continuosly and crashes my program. I also tried setting up that function to run at some interval and again, it didn't change the button. The problem is I think that at the begining, when I load the page, the client can't take any information from the table, it always gets undefined.

Code html:

    <form>
<table class="table table-hover">
    <thead>
    <tr>
        <th>Id</th>
        <th>Status</th>
        <th>Location</th>
        <th>Start</th>
    </tr>
    </thead>
    <tbody>
    <tr data-ng-repeat="interview in $ctrl.pendingInterviews">
        <td>{{ interview.id }}</td>
        <td>{{ interview.status }}</td>
        <td>{{ interview.location }}</td>
        <td>{{ interview.start | date:'medium' }}</td>
        <td><input type="submit" name="Submit" id="submit" ng-hide="varDiv" ng-click="varDiv = true; $ctrl.addParticipant(interview.id)"></td>
    </tr>
    </tbody>
</table></form>

Right now it just dissapears after I click on it which is not ok because when I reload, it appears again.

this.checkIfAdded = function checkParticipant(interviewId) {
                    var participant={
                        username:"mama",
                        interviewId:interviewId
                    };
                    return Interview.checkIfAdded(JSON.stringify(participant))
                        .then(
                            function (errResponse) {
                                console.error('Error while fetching pending interviews');
                            }
                        );
                }

this will return true or false I think based on what it gets from Interview.checkIfAdded.

Darin Cardin · Accepted Answer · 2016-09-16 07:45:20Z

1

IN this new code, i show the button based on a function called 'showButton'; the id is passed in.

        <div ng-app="app" ng-controller="ctrl"> 

       <form>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>Id</th>
                    <th>Status</th>
                    <th>Location</th>
                    <th>Start</th>
                </tr>
                </thead>
                <tbody>
                <tr data-ng-repeat="interview in pendingInterviews">
                    <td>{{ interview.id }}</td>
                    <td>{{ interview.status }}</td>
                    <td>Room {{ interview.location }}</td>

                    <td><input type="submit" name="Submit" id="submit" ng-show="showButton(id)" ng-click="click(interview.id)"></td>
                </tr>
                </tbody>
            </table></form>
        </div>  

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

                   var app = angular.module("app", []);

                   app.controller("ctrl", function($scope){

                        $scope.pendingInterviews = [
                            {id: 1, status: "ontime", location: 1 },                    
                            {id: 2, status: "canceled", location: 3 },
                            {id: 3, status: "ontime", location: 7 }
                        ]

                        $scope.showButton = function(id){

                            return false;
                        }

                   });


        </script>

edited Sep 16, 2016 at 7:45

answered Sep 16, 2016 at 7:28

Darin Cardin

7571 gold badge4 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mocktheduck Over a year ago

But I never see the scope. I just load it from the server and parse it in the html file as you see above. I can't manually add a field in the JSON because I neve truly see the JSON and get to work with it

Darin Cardin Over a year ago

How do you determine whether or not to show the button?

Mocktheduck Over a year ago

I have a function that retrieves the interview by Id, it gets all the users matched with it and checks if the current user is in that list. This is a function on the backend that returns true or false.

Mocktheduck Over a year ago

SO right now I was trying to send the interviewId from the row the button is on but it alwasy sends undefined

EternalLight Over a year ago

So use this function before you return the interviews, and set interview.isAdded according to what it returned.

|

EternalLight · Accepted Answer · 2016-09-16 07:40:00Z

0

If you have this interview data populated from your database (probably received via an AJAX request on load), you need to have a certain flag (for instance, interview.isAdded) that will define whether the button should be displayed displayed or not. So, when the button is clicked, your $ctrl.addParticipant function should change both local and remote isAdded property, so that next time you load the application, it would not show this certain participant once again. You probably have to change your backend logic to return interview.isAdded value dynamically for the current user.

<tr data-ng-repeat="interview in $ctrl.pendingInterviews">
    <td>{{ interview.id }}</td>
    <td>{{ interview.status }}</td>
    <td>{{ interview.location }}</td>
    <td>{{ interview.start | date:'medium' }}</td>
    <td><input type="submit" name="Submit" id="submit" ng-hide="interview.isAdded" ng-click="$ctrl.addParticipant(interview)"></td>
</tr>

And in your controller:

this.addParticipant = function(interview) {
    interview.isAdded = true; // Hides the button immediately.
    // Do something to save the state on the backend, so that the button  will not show up next time.
var participant = {
    username: "mama",
    interviewId: interview.id
};
return Interview.addInterview(JSON.stringify(participant)).then(function(response) {
    console.log('Added');
},function (error) {
    console.error('Error while fetching pending interviews');
});


}

Note that if you use a function in view, it is going to be on each digest cycle, so it's not a good idea to do some heavy things (like checking if interview is added via AJAX request) in there.

If you used setTimeout and the results did now show up on time, you should use the $timeout service instead. It works similarly but is angular-aware, so any delayed changes will be displayed on the page once they are made.

edited Sep 16, 2016 at 7:40

answered Sep 16, 2016 at 7:34

EternalLight

1,3281 gold badge11 silver badges20 bronze badges

2 Comments

Mocktheduck Over a year ago

I have 2 classes, Interview and User which are in a many to many relation and based on that relation I have to show or hide that button. For this reason, I can't do anything backend when retrieving the Interviews because they can't hold a value related to a default user. I

EternalLight Over a year ago

When you got the list of interview, can't you loop over them and check if it is added by a current user before returning them to Angular?

Collectives™ on Stack Overflow

Angular button to hide on load based on table row information

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related