如何使用AngularJS在按钮单击时显示（隐藏的）<td>？

Question

我想在按下按钮时显示<td>。 TD 也应该处于隐藏状态和页面加载。 我要显示的<td> 还包含一个下拉列表。我希望在第一次单击按钮时显示此 <select>。

我使用 ng-repeat 创建的 Angular 表是：

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

然后我希望按钮在第二次点击时发布数据。我可以这样做，但显示<td> 的代码不应影响第二个按钮单击功能的工作。
我是 Angular 新手，不知道如何实现这一点。
有人可以帮忙吗？

Answer 1

使用范围变量，ng-click 和 ng-if：

首先将您的 visible 变量设置为 true：

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

并更改您的 td 以使用 ng-if:

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

然后，只需在 ng-click 上更改可见值：

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

编辑 1

OP 请求使用自定义函数进行 ng-click，以执行一些更复杂的代码。

将此监听器添加到控制器：

$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;
}

并更改您的按钮以使用这个新的闪亮功能：

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

Answer 2

点击按钮后，您可以设置一个布尔值。使用这个布尔值通过 ng-show 显示或隐藏 td

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

点击：

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

你也可以使用 ng-if