例として、AngularJSでngShowとngHideを使用する方法を説明します。

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

今日、AngularのngShowとngHideディレクティブを使って、どのように表示、非表示にするかを見ていきます。
彼らは何をすべきか

ngShowとngHideを使用すると、さまざまな要素を表示または非表示にすることができます。 これは、アプリケーションの状態が変化すると、単一ページのプログラムには多くの可動部分が往復するため、角型アプリケーションを作成する際に役立ちます。

これらの指示の最大の部分は、表示や非表示にCSSやJSを使用する必要がないことです。 これらはすべて経験豊富な角度で行われます。

使い方

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="https://photo.yuedy.com/wp-content/uploads/2018/07/20180714202811-5b4a5cdb89245.jpg" ng-show="goCats">

Ng-src ng-srcを使用して画像を呼び出すと、画像をインスタンス化して確認するときにAngularが非表示になっているかどうかを確認します。 そうでなければ、サイトが読み込まれると画像がポップアップし、Angularが隠すべきであると認識されるまで表示されます。

判定式

ここでは、入力ボックスから文字列を決定します。入力ボックスの中にng-modeをバインドして変数名を付け、この変数の内容に基づいて異なる画像を表示します。

以下では、変数名aminalに焦点を当てます。


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

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


<img ng-src="https://photo.yuedy.com/wp-content/uploads/2018/07/20180714202811-5b4a5cdb89245.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とともに使用して番号を渡します。 メソッドに数値を渡すこの方法は、角度コントロールをきれいにしてテスト可能に保つことができます。


<!- 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つのモードではより多くの要素を適用できます。シーン。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ