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

如何使用AngularJS显示按钮点击（隐藏）？

2 个答案:

编辑1