ng-showが両方の状況で動作するときにng-hideを使用する理由

Question

thisのような多くの質問をしましたが、デフォルトではng-showがこの要素を隠して表示し、 ng-hideは、デフォルトで要素を表示し、条件が真であるときに要素を非表示にします。

しかし私の懸念は、ng-showまたはng-hideで処理できる状態です私はこのコードのユーザーでこのどこかがng-showとng-hide両方

<div ng-init="isShow = 'one'"> 
    <a href="#" ng-click="isShow == 'one' ? isShow = 'two' : isShow = 'one'"> 
    <div ng-show="isShow=='one'"> 
     If One show this 
    </div> 
    <div ng-hide="isShow=='one'"> 
     If Two show this 
    </div> 
</div> 

を使用している。しかし、私によると、これは、このコード

<div ng-init="isShow = 'one'"> 
    <a href="#" ng-click="isShow == 'one' ? isShow = 'two' : isShow = 'one'"> 
    <div ng-show="isShow=='one'"> 
     If One show this 
    </div> 
    <div ng-show="isShow=='two'"> 
     If Two show this 
    </div> 
</div> 

でも達成することができました例

については

したがって、両方のコードの違いは正確です。 ng-showとng-hideの両方が存在する場合は、具体的な違いがあります。誰でも知っていますか？

ありがとうございます！

Answer 1

私は、この質問が下落した理由は見当たりません。それは有効な考えです。理由は簡単ですが。 AngularJSは、その宣言的な原則の1つとして「宣言的」を持っています。要素の表示時間の90％が表示されることがありますが、場合によっては非表示にする必要がある場合は、ng-hide="thatcondition"はいつ表示する必要があるかを明確に示しています。ほとんどの場合、HIDDENにする必要がある場合は、ng-show="thatrarecondition"が読みやすくなります。

明確で読みやすいコードは、あらゆるフレームワーク、特にAngularJSの重要な原則です。!演算子は狭く、簡単に見逃されます。>, <, >=, <=などの他の比較関数よりもはるかに多くなります。正と負の可視性演算子を提供することで、ここで起こっていることをより読みやすくします。

注意すべき重要な点は、両方のディレクティブが正確に等しい値ではなく、真理値を探すことです。 JSはこれについてかなり曖昧で、時にはそれが利点です。たとえば、サブオブジェクト（詳細要素）を持つオブジェクトがあるとします。

<div ng-show="{{ object.details }}"> 
    <!-- Render object.details here --> 
</div> 

この「truthy」比較も負の場合に便利です。次のように書かれたディテール表示DIVを持っているかもしれません。注文が出荷された場合、販売システムの注文取消ブロックを隠したいとします。検討：

<div ng-hide="{{ order.shipped }}"> 
    Want to cancel this order? <a href="...">click here</a> 
</div> 

なぜこれが重要ですか？これは、order.shippedの未定義/ null値が、このブロックを非表示にすることを意味します。それは、今日、あなたが真実/偽と設定した場合、それが機能することを意味します。しかし、明日は注文が出荷された日付に変更されますか？ルールは引き続き機能します！これにより、このような表示を簡単に記述（および維持）することができます。

Answer 2

これは実際にはかなりうまくドキュメントで説明されています。 AngularJS ngShow

は、ここでのドキュメントからの引用です：「ngShowディレクティブはngShow属性に提供される発現に基づいて、指定されたHTML要素を示したり隠し要素が.ng非表示CSSクラスを削除または追加することによって示されるか、隠されています。 .ng-hide CSSクラスはAngularJSで事前定義され、表示スタイルはnone（！importantフラグを使用）に設定されています。 AngularJS ngHide

引用：「ngHideディレクティブはngHide属性に提供される発現に基づいて、指定されたHTML要素を示したり隠し要素が上にng-hide CSSクラスを削除または追加することによって、表示または非表示になっている。ngHideについて

.ng-hide CSSクラスはAngularJSであらかじめ定義されており、表示スタイルはnoneに設定されています（！importantフラグを使用）。

また、異なる角度DOMの取り扱いに関する短いが、正確な説明については、このチェックアウト：http://www.w3schools.com/angular/angular_htmldom.asp

だから最後に、彼らは実際には同じことを行います。そして、私が知る限り、それらを組み合わせて使うべきではありません。いずれかのパラメータに複数のブール値を作成したい場合は、<div ng-show="value1 && !value2">Something</div>のようにすることができます。それでも、私はあなたが関数と一緒に行かなければならないより多くのパラメータ値が必要な場合はお勧めします。

<div ng-show="ShowMe()">Content</div> 

$scope.ShowMe = function(){ 
    return $scope.value && !$scope.value2; 
}