次の指令は、HTML DOM要素のプロパティへのアプリケーションデータバインディングに使用できます。
| s.no. | 名前 | 説明する |
|---|---|---|
| 1 | ng disabled | 特定のコントロールを無効にします |
| 2 | ng-show | 特定のコントロールを表示します |
| 3 | ng-hide | 指定されたコントロールに隠れます |
| 4 | ngクリック | AngularJSクリックイベントを示します |
ng-disabledコマンド
モデルを介してNGダイサブルプロパティをHTMLボタンに追加します。モデルはチェックボックスにバインドされており、次の変更を確認します。
<入力型= "チェックボックス" ng-model = "enabledisablebutton"> disable button <button ng-disabled = "enabledisableButton">私をクリック！</button>
ng-showコマンド
NG-ShowプロパティをHTMLボタンに追加し、モデルに渡します。モデルをチェックボックスにバインドし、次の変更を確認します。
<入力型= "チェックボックス" ng-model = "showhide1"> show button <ボタンng-show = "showhide1">クリックしてください！</button>
ng-hideコマンド
モデルを介してng-hide属性をHTMLボタンとして追加します。モデルをチェックボックスにバインドし、次の変更を確認します。
<入力型= "チェックボックス" ng-model = "showhide2"> [hide button <ボタンng-hide = "showhide2">クリックしてください！</button>
ngクリックコマンド
NGクリック属性をHTMLボタンとして追加し、モデルを更新します。モデルバインディングHTMLは、組み合わせの変化を確認します。
<p>合計クリック：{{clickCounter}} </p> </td> <button ng-click = "clickcounter + 1">クリックしてください！</button>例
次の例では、上記のすべての指示を示します。
testangularjs.html
<html> <head> <title> angularjs html dom </title> </head> <body> angularjsサンプルアプリケーション</h2> <div ng-app = "" "> <table> <tr> <td> <入力タイプ="チェックボックス "ng-model =" enabledisablebutton " ng-disabled = "enabledisablebutton">私をクリック！</button> </td> </tr> <tr> <tr> <td> <入力タイプ= "チェックボックス" ng-model = "showhide1"> show button </td> <td> <button ng-show = "showhide1">私をクリックしてください！ ng-model = "showhide2"> hided button </td> <td> <button ng-hide = "showhide2">クリックしてください！</button> </td> </tr> <tr> <td> <p>合計クリック：{{clickcounter}}}}} </p> </td>私！</button> </td> </tr> </table> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>出力
WebブラウザでTextangularjs.htmlを開き、次の結果を確認してください。
上記は、AngularJS HTML DOM材料の編集です。今後も関連情報を追加し続けます。このウェブサイトへのご支援ありがとうございます！