jqLit​​eを使ってhtml要素を隠して表示する

Question

通常、AngularJSを使ってWebアプリケーションを作成している人のように、ng-hide/ng-showを使って特定の条件で特定の要素を表示させてみました。なんらかの理由でこれはうまくいかないし、コードは私がここでそれを詳しく説明するには複雑すぎる。 jQuery（または少なくともAngularが組み込んだjQueryと同じくらい）を使うのは簡単だろうと思っていました。これは私が今までに持っているものです：

上記の行は隠れているが、私はそれを返すことはできません。あなたが疑問に思っている場合には、私は他の無関係のアクションのボタンを隠そうとしています。上記のコードに ".on（）"を使用すると動作しません。要素が消えるためには、この行をどのように書く必要がありますか？もっと重要なのは、どのように再現させるのか？

Answer 1

我々は、この目的のために小さなCSSを必要とする：

.display-hide { 
    display: none; 
} 

は、私たちがページに表示されている検証の概要があるとしましょう。

<div class="alert alert-danger display-hide"> 
     <button class="close" data-close="alert"></button> 
     <span> 
      @Html.ValidationSummary(false) 
     </span> 
</div> 

とjQueryを使用して、

jQuery(document).ready(function() { 
    @if(!ViewData.ModelState.IsValid) { 
     <text> 
    $('.alert span').parent().removeClass("display-hide"); 
     </text> 
    } 
    else 
    { 
     <text> 
    $('.alert span').parent().addClass("display-hide"); 
     </text> 
    } 
}); 

このトリックは、任意のhtml要素に使用できます。

Answer 2

onおよびoffのメソッドは、要素を表示/非表示にするのではなく、イベントリスナーを追加および削除するためのメソッドです。私は偶然あなたの要素がすでに隠されており、あなたにoffが要素を隠していると信じるように導いたと思います。

あなたが本当にあなたの要素に「隠された」クラスを追加/削除するために、私はあなたが（代わりにoffとonの）addClassとremoveClassを使用することをお勧めng-hide/ng-showを使用できない場合。このクラスは、要素displayをnoneに設定できます。

しかし、角度コードを表示して、ng-showを使用して解決することをお勧めします。

Answer 3

ng-showおよびng-hideはブール値で動作します。コントローラー内でjQueryを使用しないでください。それを使用する必要がある場合は、その目的のためのディレクティブを作成してください。

コントローラの有効範囲にフラグ変数を作成します。 trueまたはfalse

に設定します。ng-showは、ブール値をtrueとして受け取った場合は要素を表示し、falseを受け取った場合は非表示にします。

ng-hideの場合は、trueの場合は非表示になり、falseの場合はfalseが表示されます。

どちらか一方の間で決めるので、両方を使用しないでください。したがって、フラグ名がアクティブであり、それがtrueに設定されていることを考慮し、最初にボタンを表示したいとします。

angular.module('demo', []).controller('DemoCtrl', function($scope){ 
    $scope.active = true; 
}); 

そしてテンプレートは以下のようになります：コードは、することができ、作業があればあるに

<div ng-app="demo"> 
    <div ng-controller="DemoCtrl"> 
    <button type="button" ng-click="active = false" ng-show="active">Hide Me</button> 
    <button type="button" ng-click="active = true" ng-hide="active">Reset</button> 
    </div> 
</div>