AngularJS 中如何通过按钮单击隐藏 HTML 元素？

在 AngularJS 中，可以通过指令来操作 DOM 元素。我们可以使用 ng-click 指令来触发一个函数，然后在这个函数里修改 DOM 元素的属性来隐藏或显示元素。

下面是一个简单的例子，点击按钮后，隐藏一个 div 元素：

<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="hide()">Hide</button>
  <div ng-hide="isHidden">Hello World!</div>
</div>

在上面的代码中，我们使用了两个指令：ng-click 和 ng-hide。

ng-click 指令绑定了一个函数 hide()，这个函数会在按钮被点击时触发。我们可以在这个函数中修改 $scope 对象的一个属性，让该属性与 ng-hide 指令绑定，从而控制 div 元素的显示状态。

下面是完整的代码：

<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="hide()">Hide</button>
  <div ng-hide="isHidden">Hello World!</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.isHidden = false;
  $scope.hide = function() {
    $scope.isHidden = true;
  };
});
</script>

在上面的 myCtrl 控制器中，我们定义了一个 $scope.isHidden 属性来控制 div 元素的显示与隐藏。初始状态下，该属性被设置为 false，表示该元素应该显示。当按钮被点击时，调用 hide() 函数，将 $scope.isHidden 设置为 true，从而隐藏了 div 元素。

通过这种方式，我们可以通过代码来控制 HTML 元素的显示与隐藏，从而实现更加灵活的页面布局。