CODEWITHSUNDEEP
angularjsangularjs-ng-repeathtml-table
Phoenix
Phoenix

Reputation: 295

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

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

My Angular table created using ng-repeat is :

<div class="widget-content" ng-controller="getAllBenchersController">

  <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'">
            <select>
                <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>
            </select>
        </td>
        <td>
            <a><button class="btn  btn-success"  ng-model="checked">Reserve</button></a>
        </td>

    </tr>
  </table>

</div>

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

Upvotes: 0

Views: 2501

Answers (2)

illeb
illeb

Reputation: 2947

use scope variables, ng-click and ng-if:

Start by setting your visible variable to true:

app.controller('controller', function($scope) {
     $scope.visible = false;
});

and change your td to use ng-if:

<td data-title="'Select Account'" ng-if="visible">

then, simply change visible value on ng-click:

<a><button ng-click="visible = true">Reserve</button></a>

Edit 1

OP requested an ng-click with a custom function, to perform some more complex code.

Add this listener to the controller:

$scope.click = function(){
   if($scope.clicked)
     mySecondFunction(); //this is called the second time users clicks. You can do whatever you want here.

   $scope.clicked = true;
}

and change your button to use this new shiny function:

<a><button ng-click="click()">Reserve</button></a>

Upvotes: 1

g.005
g.005

Reputation: 406

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

Upvotes: 1

Related Questions