亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

AngularJS HTML DOM

以下指令用于將應用程序數據綁定到HTML DOM元素的屬性-

序號名稱與說明
1

ng-disabled

禁用給定的控件。

2

ng-show

顯示給定的控件。

3

ng-hide

隱藏給定的控件。

4

ng-click

表示AngularJS click事件。

ng-disabled 指令

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

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

ng-show 指令

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

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

ng-hide 指令

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

<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>點擊總數: {{ 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>
測試看看?/?

輸出結果

在網絡瀏覽器中打開文件testAngularJS.htm并查看結果。

圖片.png