Question

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

这是表格。

<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数据时，按钮必须改变。现在根据这个;

生成按钮应显示data.UserLogin.Status == ''（空）挂起按钮应显示data.UserLogin.Status == 'pending' 重试按钮应在data.UserLogin.Status == 'pending'

时显示

我如何实现这一目标。帮助我们不胜感激。

Answer 1

您可以使用ng-show ng-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>

Answer 2

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

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

Answer 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，效率很高

Answer 5

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

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

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

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

5 个答案: