AngularJS是一種流行的JavaScript框架，用于構建單頁應用程序。它使用指令來擴展HTML語法，使開發人員能夠以聲明式的方式定義動態web頁面的行為。其中一個常見需求是點擊按鈕時動態添加一個新的div元素到頁面上。本文將通過幾個代碼案例詳細解釋如何在AngularJS中實現這個功能。
，我們需要在HTML頁面中引入AngularJS庫。可以使用以下代碼來引入：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>

接下來，我們需要創建一個AngularJS應用程序。可以使用以下代碼來創建一個名為"myApp"的應用程序：

<script>
var app = angular.module('myApp', []);
</script>

然后，在頁面上創建一個按鈕，并將其與一個控制器函數綁定。控制器函數將負責在按鈕點擊時添加一個新的div元素。

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="addDiv()">添加DIV</button>
<div ng-repeat="div in divList track by $index">
<div>這是第 {{$index + 1}} 個div元素。</div>
</div>
</div>
<script>
app.controller('myCtrl', function($scope) {
$scope.divList = [];
<br>
    $scope.addDiv = function() {
$scope.divList.push({});
}
});
</script>

在上面的代碼中，我們使用ng-click指令將按鈕的點擊事件綁定到控制器函數"addDiv()"。這個函數將一個空對象添加到$scope.divList數組中。然后使用ng-repeat指令來遍歷divList數組，并為每個元素創建一個新的div元素。
當我們點擊"添加DIV"按鈕時，控制器函數將在divList數組中添加一個新的對象。ng-repeat指令會自動更新頁面，顯示新添加的div元素。
這里還有一個替代的代碼案例，可以通過點擊按鈕來動態顯示或隱藏一個已存在的div元素。

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="toggleDiv()">顯示/隱藏DIV</button>
<div ng-show="showDiv">這是一個動態顯示/隱藏的div元素。</div>
</div>
<script>
app.controller('myCtrl', function($scope) {
$scope.showDiv = false;
<br>
    $scope.toggleDiv = function() {
$scope.showDiv = !$scope.showDiv;
}
});
</script>

在上述代碼中，我們使用ng-show指令將div元素的顯示狀態與$scope.showDiv變量綁定。初始狀態下，$scope.showDiv為false，所以div元素默認是隱藏的。當我們點擊"顯示/隱藏DIV"按鈕時，控制器函數"toggleDiv()"會將showDiv變量的值取反，從而實現動態顯示或隱藏div元素。
通過上述代碼案例，我們能夠清楚地了解如何在AngularJS中實現點擊按鈕時添加一個新的div元素或顯示/隱藏已存在的div元素。這些功能可以方便地擴展和定制，使我們能夠構建出交互豐富的web應用程序。希望本文能夠幫助讀者更好地理解和應用AngularJS的相關知識。