AngularJSでクリックイベントを定義するにはどうすればよいですか? angularjs イベントの詳細な紹介

この記事では、angularjsのイベントの詳細な分析を主に、angularjsのng-click命令の例を紹介し、最後にHTMLの隠し要素の分析を紹介します。この記事を一緒に見てみましょう

AngularJS Events

AngularJS には独自の HTML イベント ディレクティブがあります。

ng-click ディレクティブ

ng-click ディレクティブは、AngularJS のクリック イベントを定義します。

AngularJS の例

<p ng-app="" ng-controller="myCtrl">

<ボタン ng-click="カウント = count + 1">クリックしてください!</ボタン>

<p>{{ カウント}} t & lt; /p & lt; ng-hide="true"
HTML 要素を非表示に設定します。
ng-hide="false" HTML要素を表示するように設定します。

AngularJS 实例

<p ng-app="myApp" ng-controller="personCtrl">

& lt;ボタン ng- click="toggle()">>隐藏/显示</button>

<p ng-hide= 「myVar」 >
名: <input type="text" ng-model="firstName"><br >
姓名: <input type="text" ng-model="lastName"><br>
br>
フルネーム: {{名 + " " + 姓}}
</p>

</p> ;

<script>var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "ジョン",
$scope.lastName = "Doe"
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
</script>

アプリケーション分析:

パート1 personControllerはコントローラーに似ています章。

アプリケーションにはデフォルトの属性があります: $scope.myVar = false;

ng-hide このディレクティブは、myVar の値に基づいて、

要素と 2 つの入力フィールドを表示するかどうかを設定します。 (true または false) を表示するかどうかを設定します。

toggle() 関数は、myVar 変数の値 (true と false) を切り替えるために使用されます。

ng-hide="true" は要素を非表示にします。

HTML 要素を表示

ng-show コマンドを使用して、アプリケーションの一部を表示するかどうかを設定できます。

ng-show="false"は、HTML要素を非表示に設定できます。

ng-show="true" HTML要素を表示するように設定できます。

次の例では ng-show ディレクティブを使用しています:

AngularJS の例

<p ng-app="myApp" ng-controller="personCtrl">

<ボタン ng-click= "toggle()">隐藏/显示</button>

<p ng-show="myVar" >
名前: <input type="text" ng-model="firstName"><br>
姓: input type="text" ng-model="lastName"><br>
< br>
姓名: {{名 + " " + 姓}}
</p>

</p>

< script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope .lastName = "Doe"
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
});
</script>

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAngularJS ユーザー マニュアル にアクセスして学習してください)。以下のメッセージ。

以上がAngularJSでクリックイベントを定義するにはどうすればよいですか? angularjs イベントの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。