AngularJS_AngularJSのngShowとngHideの使い方を詳しく解説

今日は、Angular の ngShow ディレクティブと ngHide ディレクティブを使用して、表示と非表示を実行する方法を見ていきます。
彼らがすべきこと

ngShow と ngHide を使用すると、さまざまな要素を表示または非表示にすることができます。シングルページ アプリケーションには、アプリケーションの状態が変化するにつれて行き来する多くの可動部分があるため、これは Angular アプリケーションを作成するときに役立ちます。

これらのディレクティブの優れた点は、CSS や JS を使用して表示または非表示にする必要がないことです。これらはすべて経験豊富な Angular によって行われます。

使用法

ngShow または ngHide を使用するには、表示または非表示にする要素にディレクティブを追加するだけです。

<!-- FOR BOOLEAN VALUES =============================== -->
<!-- for true values -->
<div ng-show="hello">this is a welcome message</div>  
 
 <!-- can also show if a value is false --> 
<div ng-show="!hello">this is a goodbye message</div>  
 
<!-- FOR EXPRESSIONS =============================== -->
<!-- show if the appState variable is a string of goodbye -->
<div ng-show="appState == 'goodbye'">this is a goodbye message</div> 
 
<!-- FOR FUNCTIONS =============================== -->
<!-- use a function defined in your controller to evaluate if true or false -->
<div ng-hide="checkSomething()"></div>

マークアップを設定したら、さまざまな方法で「こんにちは」または「さようなら」を設定できます。これを Angular コントローラーで設定し、アプリの読み込み時に div を表示または非表示にすることができます。

上記は ng-show または ng-hide に使用できます。値、式、または関数が true を返す場合、何かが隠されています。

はブール値

として使用されます。

ng-click を使用してリンクを作成し、goCats の値を true または false に切り替えます。

<a href ng-click="goCats = !goCats">Toggle Cats</a>

次に、ng-show を使用して、カテゴリー画像を表示または非表示にします。

 
<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="goCats">

ng-src ng-src を使用してイメージを呼び出すため、Angular はイメージをインスタンス化して確認するときにそれを非表示にするかどうかを確認します。これを行わないと、Angular が非表示にする必要があると認識するまで、サイトの読み込み時に画像がポップアップ表示されます。

判定表現

ここでは、入力ボックスから渡された文字列を判断し、ng-mode を入力ボックスにバインドし、それにamino変数という名前を付け、この変数の内容に基づいてさまざまな画像を表示します。

次に、変数名をaminoalとします。

<input type="text" ng-model="aminal">

次に、ng-show を使用して文字列を判定します。

<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="aminal == 'cat'">

使用方法

入力が奇数か偶数かを判断するための簡単なチェックを行います。 AngularJS ファイルにメソッドを作成します:

// set the default value of our number
$scope.myNumber = 0;
   
// function to evaluate if a number is even
$scope.isEven = function(value) {
 
if (value % 2 == 0)
 return true;
else 
 return false;
 
};

メソッドが作成されたら、次にしなければならないことは、ng-show または ng-hide を通じてそれを使用し、数値を渡すことです。メソッドを介して数値を渡すと、Angular コントロールがクリーンでテストしやすくなります。

<!-- show if our function evaluates to false -->
<div ng-show="isEven(myNumber)">
  <h2>The number is even.</h2>
</div>
  
<!-- show if our function evaluates to false -->
<div ng-show="!isEven(myNumber)">
  <h2>The number is odd.</h2>
</div>

結論

これら 2 つの方向のガイダンスにより、アプリケーションは大幅に改善されます。これらはブール値、式、関数に基づいて関数を表示および非表示にする要素にすぎませんが、これら 3 つのモードはより多くのシーンに適用できるようになります。