使用angularjs隐藏/显示div(Hide/show div using angularjs)

这是最初隐藏的，在按钮单击时，我想显示表行，而这些行又从WCF服务获取数据。我是角度新手，所以我无法在按钮点击时显示表格。它闪烁并消失。

.html snippet <div data-ng-hide="vm1.organizationNumber!=0 && !loading"> <div class="row"> <div class="col-sm-12 col-md-12 col-lg-12 table-responsive"> <table class="table table-bordered table-condensed table-hover table-striped"> <thead> <tr style="white-space: nowrap;"> <th>Organization #</th> <th>Contract #</th> <th>Plan #</th> <th>Company Name</th> </tr> </thead> <tr> <td>{{vm1.organization}}</td> <td>{{vm1.number}}</td> <td>{{vm1.PlanName}}</td> <td>{{vm1.EmployerName}}</td> </tr> </table> </div> </div> </div> </div>

which is initially hidden, on button click i want to show table rows which in turn get data from WCF service. I am new to angular so i m not able to show the table on button click. it flickers and goes away.

.html snippet <div data-ng-hide="vm1.organizationNumber!=0 && !loading"> <div class="row"> <div class="col-sm-12 col-md-12 col-lg-12 table-responsive"> <table class="table table-bordered table-condensed table-hover table-striped"> <thead> <tr style="white-space: nowrap;"> <th>Organization #</th> <th>Contract #</th> <th>Plan #</th> <th>Company Name</th> </tr> </thead> <tr> <td>{{vm1.organization}}</td> <td>{{vm1.number}}</td> <td>{{vm1.PlanName}}</td> <td>{{vm1.EmployerName}}</td> </tr> </table> </div> </div> </div> </div>

最满意答案

下面是一个例子：“Switch”按钮将切换一个名为switch的布尔变量，div将根据该变量的值隐藏或显示。

<button ng-click="switch = !switch">switch</button> <div ng-hide="switch"></div>

Here's an example: the "Switch" button will toggle a boolean variable called switch, and the div will be hidden or shown based on the value of that variable.

<button ng-click="switch = !switch">switch</button> <div ng-hide="switch"></div>

更多推荐