如何使用 bootstrap 和 angularjs 显示和隐藏按钮？答案

【问题标题】：How to show and hide buttons with bootstrap and angularjs?如何使用 bootstrap 和 angularjs 显示和隐藏按钮？
【发布时间】：2016-10-27 18:51:09
【问题描述】：

我有一个表格，其中包含一些数据和一些按钮，这些按钮会根据响应和用户而变化。

这是桌子。

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

我需要做的是，当响应来自 JSON 数据时，按钮必须更改。现在按照这个；

生成按钮应显示 whendata.UserLogin.Status == ''(empty) 待定按钮应在data.UserLogin.Status == 'pending' 时显示 data.UserLogin.Status == 'pending' 时应显示重试按钮

我如何做到这一点。帮助将不胜感激。

【问题讨论】：

标签： html angularjs twitter-bootstrap

【解决方案1】：

您可以使用ng-showng-hide 或ng-if，如下所示，

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

【讨论】：

【解决方案2】：

你应该选择 ng-if 而不是 ng-show 或 ng-hide。因为在基于标志的 ng-show 或 ng-hide 的情况下，内容被加载到 DOM 中。因此，如果您尝试使用浏览器的 Web 开发人员更改标志的值，您可以看到实际内容。但是如果你选择 ng-if，只有在条件为真时才会在运行时加载内容。因此，当您想要更快的性能时，您可以使用 ng-show 或 ng-hide，但如果我们想要运行时行为，您应该使用 ng-if。

【讨论】：

【解决方案3】：

您可以编写如下代码..

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

【讨论】：

【解决方案4】：

我们可以使用 ng-if,ng-show,ng-hide 之类的

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

使用 ng-if ，效率很高

【讨论】：

【解决方案5】：

在 API 的成功函数中使用以下代码。此代码将在您获得响应并创建 DOM 后运行。

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

注意：不要忘记在控制器中添加 $timeout。

【讨论】：