CSSをモーダルに動的に適用しますか？

Question

私はモーダルに取り組んでおり、ここではそのHTMLコードです。あなたがスタイルタグを見ると、私は基本的に.model-content cssクラスと.modal-dialog cssクラスを上書きしています。

<script type="text/ng-template" id="Data.html"> 

<style> 
    .modal-content { 
     width: 100%; 
     height: 100%; 
     overflow-y: auto; 
     margin: 120px 0px 0px 0px; 
    } 
    .modal-dialog { 
     height: 70%; 
    } 
</style> 

<div ng-show="Userinfo"> 
</div> 

<div ng-show="!Userinfo"> 
</div> 

述べたとの両方が$scope.Userinfoにリンクされている2つのdivがあります。私は角度ng-showを使用して両方のdivを表示および非表示にしています。 1番目のdivは小さなコンテンツです。だから私はそれに上記のスタイルを適用したくないです。 2番目のdivは内容が豊富です。だから、2番目のdivが見えるようになると、私は上記のスタイルをそれに付けることを望みます。

私は上記のスタイルを2番目のdivに動的に割り当てることができるかどうか知らせてくれますか？現在、両方の部門に上記のスタイルを適用しており、必要がない場合は第1部門が非常に大きく見えています。

Answer 1

これはCSSで行うことができます。 CSSクラスを最初のモーダルに適用できますが、2番目のモーダルに適用することはできません。

<style> 
     .custom-modal .modal-content { 
      width: 100%; 
      height: 100%; 
      overflow-y: auto; 
      margin: 120px 0px 0px 0px; 
     } 

     .custom-modal .modal-dialog { 
      height: 70%; 
     } 
</style> 


<div ng-show="Userinfo" class="custom-modal"> 
</div> 

<div ng-show="!Userinfo"> 
</div>