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

Question

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?

illeb · Accepted Answer · 2016-09-21 15:07:21Z

1

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>

edited Sep 21, 2016 at 15:07

answered Sep 21, 2016 at 14:37

illeb

2,9471 gold badge23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Phoenix Over a year ago

Sorry, I made a mistake while making the question. It was the opposite way.

Phoenix Over a year ago

On second click of the button, I want it to run another function. The above code would contradict with that?

illeb Over a year ago

the current code isn't able to do that. To perform more complex functions, call a custom function on ng-click, like so: ng-click="myFunction" and declare it in the controller

Phoenix Over a year ago

and can I use your code to achieve show() of the hidden td within the function?

illeb Over a year ago

I'm not sure if i understand you right, but i'll edit my post to show you an example.

|

g.005 · Accepted Answer · 2016-09-21 14:38:36Z

1

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

answered Sep 21, 2016 at 14:38

g.005

4063 silver badges12 bronze badges

2 Comments

Phoenix Over a year ago

On second click of the button, I want it to run another function. The above code would contradict with that?

g.005 Over a year ago

You can call a controller function upon ng-click. In the controller function, you can decide whether you need to hide or call another function. Hope i answered your question

Collectives™ on Stack Overflow

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

2 Answers 2

Edit 1

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit 1

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related