<div ng-model> 是 AngularJS 框架中的一個關鍵指令，用于在 HTML 頁面中綁定數據模型。通過使用這個指令，我們可以將數據模型與頁面上的特定元素進行關聯，實現數據的雙向綁定。在本文中，我們將通過幾個代碼案例來詳細解釋和說明 <div ng-model> 指令的使用方法和效果。
，讓我們來看一個簡單的示例。假設我們有一個包含一個輸入框和一個按鈕的頁面。我們希望當用戶在輸入框中輸入內容時，這個內容能夠實時顯示在頁面上的某個位置，并且當用戶點擊按鈕時，可以將輸入框中的內容進行保存。下面是使用 <div ng-model> 實現這個功能的代碼示例：

輸入框：

<div ng-model="inputText"><input type="text"></div>

顯示內容：

<div>{{inputText}}</div>

保存按鈕：

<button ng-click="saveInput()">保存</button>

在這個示例中，我們定義了一個 ng-model 指令，并將其綁定到一個名為 inputText 的變量上。輸入框通過 <input> 元素定義，而顯示內容的位置則通過另一個 <div> 元素定義，使用雙花括號 {{}} 的方式展示變量的值。另外，我們還定義了一個保存按鈕，并通過 ng-click 指令將其與 saveInput() 方法進行關聯。
當用戶在輸入框中輸入內容時，<div>{{inputText}}</div> 中的變量會實時更新，并將內容顯示出來。當用戶點擊保存按鈕時，相關的 saveInput() 方法會被觸發。
下面我們再來看一個稍微復雜一些的例子。假設我們有一個列表，其中每個列表項都包含一個復選框和一個文本框，我們希望當用戶選中復選框時，文本框中的值可以進行編輯，并且可以通過一個按鈕來保存修改后的值。這個需求可以通過下面的代碼實現：

<ol>
<li ng-repeat="item in items">
<div><input type="checkbox" ng-model="item.checked"></div>
<div><input type="text" ng-model="item.text" ng-disabled="!item.checked"></div>
</li>
</ol>

保存按鈕：

<button ng-click="saveChanges()">保存</button>

在這個例子中，我們使用了 ng-repeat 指令來生成一個包含多個列表項的列表。每個列表項都包含一個復選框和一個文本框。我們通過 ng-model 指令將復選框的選中狀態和文本框中的值與 items 數組中的相應元素進行綁定。當用戶選中復選框時，文本框就會變為可編輯狀態（通過 ng-disabled 指令控制）。最后，我們通過 ng-click 指令將保存按鈕與 saveChanges() 方法進行關聯。
以上兩個案例展示了如何使用 <div ng-model> 指令來實現不同的功能。通過這個指令，我們可以輕松地實現數據的雙向綁定，使得頁面的展示和交互更加靈活和動態。當然，除了 <div ng-model> 指令，AngularJS 還提供了許多其他的指令和功能，用于更加高效地構建 Web 應用程序。