How to show and hide buttons with bootstrap and angularjs?

Question

I have a table which contains some data and some buttons which changes according to response and user.

Here's the table.

<div class="form-group">
    <div class="col-lg-12 col-md-9">
        <table id="basic-datatables" class="table table-bordered" cellspacing="0" width="100">
            <thead style="text-align:center">
                <tr>
                    <th rowspan="1" colspan="1" style="width:100px; text-align:center">Employee ID</th>
                    <th rowspan="1" colspan="1" style="width:100px; text-align:center">Employe Name</th>
                    <th rowspan="1" colspan="1" style="width:100px; text-align:center">Email</th>
                    <th rowspan="1" colspan="1" style="width:100px; text-align:center">Department</th>
                    <th rowspan="1" colspan="1" style="width:100px; text-align:center">Date Created / Joined</th>
                    <th rowspan="1" colspan="1" style="width:110px; text-align:center">Actions</th>
                </tr>
            </thead>
            <tbody style="text-align:match-parent">
                <tr ng-repeat="data in details = (FilterDetails | limitTo:itemsPerPage:(currentPage-1)*itemsPerPage)">
                    <td style="text-align:center">{{data.Employee.Empid}}</td>
                    <td style="text-align:center">{{data.Employee.Fname}} {{data.Employee.Lname}}</td>
                    <td style="text-align:center">{{data.Employee.Email}}</td>
                    <td style="text-align:center">{{data.Department.DeptName}}</td>
                    <td style="text-align:center">{{data.Employee.Date_of_join | dateFormat}}</td>
                    <td style="text-align:center; width:100px">
                        <div>
                            <button type="submit" class="btn btn-success pad btn-sm" ng-click="Generate(data)">Generate</button>
                            <!--<button type="submit" class="btn btn-success pad btn-sm" ng-click="state = true" ng-hide="state">Generate</button>-->
                            <button type="submit" class="btn btn-warning btn-sm" ng-show="data.UserLogin.Status=='pending'">Pending</button>
                            <button type="submit" class="btn btn-default btn-sm" ng-show="data.UserLogin.Statuss=='pending'">Retry</button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <p ng-show="details.length == 0">No Users found.</p>
        <div class="col-md-8 col-xs-12">
            <uib-pagination total-items="totalEmployees" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" boundary-links="true" class="pagination" items-per-page="itemsPerPage"></uib-pagination>
        </div>
    </div>
</div>

What I need to get done is that when the response comes from the JSON data the buttons have to change. Now according to this;

Generate button should show whendata.UserLogin.Status == ''(empty) Pending button should show when data.UserLogin.Status == 'pending' Retry button should show when data.UserLogin.Status == 'pending'

How do I achieve this. Help woud be appreciated.

Sathyanarayanan · Accepted Answer · 2016-10-27 07:53:22Z

3

You can use ng-show ng-hide or ng-if like below,

<button class="btn btn-default" ng-show="data.UserLogin.Status == ''">Generate </button> or <button class="btn btn-default" ng-hide="data.UserLogin.Status != ''">Generate </button> or <button class="btn btn-default" ng-if="data.UserLogin.Status == ''">Generate </button>

answered Oct 27, 2016 at 7:53

Sathyanarayanan

4323 silver badges7 bronze badges

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

Comments

Vrushali · Accepted Answer · 2016-10-27 10:51:09Z

3

You should go for ng-if instead of ng-show or ng-hide. Because in case of ng-show or ng-hide based on the flag the content is loaded in the DOM. so if u try to change the value of flag by using web developer of browser u can be able to see the actual content. But if u go for ng-if, the content is loaded at runtime only when the condition is true. so whenever u want a quicker performance you can go for ng-show or ng-hide but if we want runtime behavior u should use ng-if.

answered Oct 27, 2016 at 10:51

Vrushali

311 silver badge3 bronze badges

Comments

Anil Kumar Ram · Accepted Answer · 2016-10-27 07:27:26Z

2

You can write code as below..

<button class="btn btn-default" ng-show="data.UserLogin.Status == ''">Generate </button>

<button class="btn btn-default" ng-show="data.UserLogin.Status == 'pending'">Pending </button>

<button class="btn btn-default" ng-show="data.UserLogin.Status == 'pending'">Retry</button>

answered Oct 27, 2016 at 7:27

Anil Kumar Ram

1,22111 silver badges14 bronze badges

Comments

Arun · Accepted Answer · 2016-10-27 07:42:48Z

2

We can use ng-if,ng-show,ng-hide like

<button type="submit" class="btn btn-success pad btn-sm" ng-click="Generate(data)" ng-if="!data.UserLogin.Status">Generate</button>  <button type="submit" class="btn btn-success pad btn-sm" ng-click="Pending (data)" ng-if="!data.UserLogin.Status">Pending </button>

use ng-if ,it is efficient

answered Oct 27, 2016 at 7:42

Arun

1,1839 silver badges15 bronze badges

Comments

SPViradiya · Accepted Answer · 2016-10-27 07:29:16Z

0

Use below code in the success function of the API. This code will run after you get the response and the DOM is created.

$scope.$evalAsync(function(){  
            $timeout(function() { 
                 // Here set the scope variable and it will work in ng-show                    
            }, 0); // wait...
        });

Note: Do not forget to add $timeout in the controller.

answered Oct 27, 2016 at 7:29

SPViradiya

1177 bronze badges

Collectives™ on Stack Overflow

How to show and hide buttons with bootstrap and angularjs?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related