AngularJS：点击后隐藏按钮

Question

如果您初次接触Angular，并且对如何使用“Angular方式”进行操作感到困惑。我只想做的是点击按钮以显示视图内隐藏的元素，然后隐藏已单击的按钮。任何帮助都将非常棒。

HTML：

<button class="btn btn-primary" ng-click="showDiv=true; hideMe()">
  Show Div
</button>
<div ng-show="showDiv">
  I was hidden now you see me, but how do I hide the button?
</div>

控制器：

  $scope.hideMe = function(){
    console.log('hide the button');
    $scope.hide();
  }

代码示例: Plunker

理想情况下，希望在按钮上加入ng-hide，并且不需要在控制器中运行一个函数。

- wsfuller

Answer 1

<button ng-hide="showDiv"...

应该也可以工作

- Kendall

Answer 2

只需在按钮上添加ng-show="!showDiv"，这将隐藏它，如果showDiv=true

为了明确，新的HTML应该是：

<button class="btn btn-primary" ng-click="showDiv=true" ng-show="!showDiv">Show Div</button>

- code