Phoenix Phoenix - 1 year ago 61
AngularJS Question

How to show a (hidden) <td> on button click using AngularJS?

I want to show a on button press. The TD should also be in a hidden state and page load.
The I want to show also contains a drop down list. I want this to be displayed on first button click.

My Angular table created using ng-repeat is :

<table ng-table="talentPoolList" show-filter="true" class="table table-striped table-bordered">
<tr ng-repeat="employee in data | filter: testFilter">
<td data-title="'#'">{{$index + 1}}</td>
<td data-title="'Select Account'">
<option disabled selected value> -- select an option -- </option>
<option id="selectedLocked">Blocked</option>
<option id="selectedBilled">Billed<//option>
<option id="selectedShadow">Shadow</option>
<option id="selectedOnNotice">OnNotice</option>
<option id="selectedPOC">POC</option>
<a><button class="btn btn-success" ng-model="checked">Reserve</button></a>


Then I want the button to post a data on its second click. I can do that, but the code for displaying the should not effect the working of second button click function.
I am new to Angular and have no clue how to achieve this.
Can anyone help?

Answer Source

Upon clicking on the button you can set a boolean value. Use this boolean value to show or hide td using ng-show

<td ng-show="showData" data-title="'#'">{{$index + 1}}</td>

and in click:

<a><button class="btn  btn-success" ng-click="showData= !showData">Reserve</button></a>

You can also use ng-if

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download