AngularJS イベント

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

ng-click ディレクティブ

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

AngularJS サンプル

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

<button ng-click="count = count + 1">クリックして！</button>

<p>{{ count }}</p>

</div>

試してみる »

HTML 要素を非表示にする

ng-hideディレクティブは、アプリケーションの一部を表示するかどうかを設定するために使用されます。

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

ng-hide="false"HTML 要素を表示に設定します。

AngularJS サンプル

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

<button ng-click="toggle()">非表示/表示</button>

<p ng-hide="myVar">
名:<input type="text" ng-model="firstName"><br>
氏名:<input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>

</div>

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

試してみる »

アプリケーションの解説:

第一部personControllerコントローラの章と似ています。

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

ng-hideディレクティブは、<p> 要素と2つの入力フィールドを表示するかどうかを設定します。myVar値 (true または false) によって表示/非表示を設定します。

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

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

HTML 要素を表示する

ng-showディレクティブは、アプリケーションの一部が可視かどうかを設定するために使用できます。 。

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

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

次のサンプルは ng-show ディレクティブを使用しています:

AngularJS サンプル

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

<button ng-click="toggle()">非表示/表示</button>

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

</div>

<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>

試してみる »
その他の拡張