AngularJS HTML DOM

以下指令用于將應(yīng)用程序數(shù)據(jù)綁定到HTML DOM元素的屬性-

序號	名稱與說明
1	`ng-disabled` 禁用給定的控件。
2	`ng-show` 顯示給定的控件。
3	`ng-hide` 隱藏給定的控件。
4	`ng-click` 表示AngularJS click事件。

ng-disabled 指令

將ng-disabled屬性添加到HTML按鈕，然后將其傳遞給模型。將模型綁定到復(fù)選框，然后查看變化。

<input type = "checkbox" ng-model = "enableDisableButton">Disable Button<button ng-disabled = "enableDisableButton">Click Me!</button>

ng-show 指令

將ng-show屬性添加到HTML按鈕，然后將其傳遞給模型。將模型綁定到復(fù)選框，然后查看變化。

<input type = "checkbox" ng-model = "showHide1">Show Button<button ng-show = "showHide1">Click Me!</button>

ng-hide 指令

將ng-hide屬性添加到HTML按鈕，然后將其傳遞給模型。將模型綁定到復(fù)選框，然后查看變化。

<input type = "checkbox" ng-model = "showHide2">Hide Button<button ng-hide = "showHide2">Click Me!</button>

ng-click 指令

將ng-click屬性添加到HTML按鈕并更新模型。將模型綁定到HTML并查看變化。

<p>Total click: {{ clickCounter }}</p><button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>

在線示例

以下示例顯示了上述所有指令的使用。

testAngularJS.htm

示例

<html>
   <head>
      <title>AngularJS HTML DOM</title>
   </head>
   
   <body>
      <h2>AngularJS-HTML DOM示例(cainiaoplus.com)</h2>
      
      <div ng-app = "">
         <table border = "0">
            <tr>
               <td><input type = "checkbox" ng-model = "enableDisableButton">禁用按鈕</td>
               <td><button ng-disabled = "enableDisableButton">Click Me!</button></td>
            </tr>
            <tr>
               <td><input type = "checkbox" ng-model = "showHide1">顯示按鈕</td>
               <td><button ng-show = "showHide1">Click Me!</button></td>
            </tr>
            <tr>
               <td><input type = "checkbox" ng-model = "showHide2">隱藏按鈕</td>
               <td><button ng-hide = "showHide2">Click Me!</button></td>
            </tr>
            <tr>
               <td><p>點擊總數(shù): {{ clickCounter }}</p></td>
               <td><button ng-click = "clickCounter = clickCounter + 1">Click Me!</button></td>
            </tr>
         </table>
      </div>
      
      <script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

測試看看?/?

輸出結(jié)果

在網(wǎng)絡(luò)瀏覽器中打開文件testAngularJS.htm并查看結(jié)果。

圖片.png

AngularJS 模塊 AngularJS 表格