1. ホーム
  2. 質問と答え
  3. ng-ifを使用して入力フィールドを表示または非表示にするにはどうすればよいですか？

ng-ifを使用して入力フィールドを表示または非表示にするにはどうすればよいですか？

2017-06-04 14 views
0

まったく新しい角型JSです。 ng-ifを使用して、異なる入力フィールドを表示または非表示にするにはどうすればよいですか？私は現在ng-showを使用していますが、DOMを完全に削除しないため、検証中に難しくなります。特定のdiv内に表示されている入力フィールドを必須にする場合は、のみを選択します。ng-ifを使用して入力フィールドを表示または非表示にするにはどうすればよいですか？

を選択した場合は、を選択して、showme2 divを表示し、フィールドを必須にします。 Productを選択すると、showme1 divが表示され、フィールドが必須になります。使用されている場合はNG-方法を理解するために

<div ng-show="showme1"> 
     <div class="form-group"> 
     <h3 class="col-xs-12 col-sm-3">Add Product details</h3> 
      <label class="col-xs-12 col-sm-3 control-label" for="Product1</label> 
      <div class="col-xs-12 col-sm-6"> 
       <input type="text" name="productName" class="form-control" id="productName1" required="required" placeholder="Product 1"> 
      </div> 
     </div> 

     <<div class="form-group"> 
     <h3 class="col-xs-12 col-sm-3">Add Product details</h3> 
      <label class="col-xs-12 col-sm-3 control-label" for="Product2</label> 
      <div class="col-xs-12 col-sm-6"> 
       <input type="text" name="productName" class="form-control" id="productName2" required="required" placeholder="Product 2"> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label class="col-xs-12 col-sm-3 control-label"></label> 
      <div class="col-xs-12 col-sm-6" align="center" ng-click="showme2=true; showme1=false"><a>(or Select Fund)</a><br /></div> 
     </div> 
</div> 


<div ng-show="showme2"> 
     <div class="form-group"> 
     <h3 class="col-xs-12 col-sm-3">Add Fund details</h3> 
      <label class="col-xs-12 col-sm-3 control-label" for="Product1</label> 
      <div class="col-xs-12 col-sm-6"> 
       <input type="text" name="fundName" class="form-control" id="fundName1" required="required" placeholder="Fund 1"> 
      </div> 
     </div> 

     <<div class="form-group"> 
     <h3 class="col-xs-12 col-sm-3">Add Product details</h3> 
      <label class="col-xs-12 col-sm-3 control-label" for="Product2</label> 
      <div class="col-xs-12 col-sm-6"> 
       <input type="text" name="fundName" class="form-control" id="fundName2" required="required" placeholder="Fund 2"> 
      </div> 
     </div> 

      <div class="form-group"> 
      <label class="col-xs-12 col-sm-3 control-label"></label> 
      <div class="col-xs-12 col-sm-6" ng-click="showme1=true; showme2=false" align="center"><a>(or Select Product)</a></div> 
     </div> 
</div>

出典

2017-06-04 Pro86

+0

だから 'ng-show'を' ng-if'に変更するとどうなりますか？彼らはどちらもブール式を期待しています – charlietfl

+0

@charlietflはい。どのようにして仕事をするのですか？乾杯。 – Pro86

+0

それは質問された質問にも答えません。ここで助けが必要な場合は、もっと詳細にする必要があります。 [ask]と[mcve]を読むのに少し時間をかけてください – charlietfl

答えて

1

リファレンスthis stackoverflowの答えを：以下の私の現在のコードを参照してください。

あなたは（）{..}他{..} Angular.jsで場合を達成するためにNG-場合を使用することができます。

<div ng-if="data.id == 5"> 
<!-- If block --> 
</div> 
<div ng-if="data.id != 5"> 
<!-- Your Else Block --> 
</div>

また、私は、ここを参照してください場合はNGを、使用することをCodePenであなたのコードスニペットを変更しました。 https://codepen.io/silicaRich/pen/PjwwPv

JS

var TestApp = angular.module("TestApp", []);

HTML

<html> 
    <head> 
    </head> 
    <body ng-app='TestApp'> 

    <!-- Will display if showme == true --> 
    <div ng-show="showme"> 
     <div class="form-group"> 
      <h3 class="col-xs-12 col-sm-3">Add Product details // showme1</h3> 
      <label class="col-xs-12 col-sm-3 control-label" for="Product1"></label> 
      <div class="col-xs-12 col-sm-6"> 
       <input type="text" name="productName" class="form-control" id="productName1" required="required" placeholder="Product 1"> 
      </div> 
     </div> 

     <div class="form-group"> 
     <h3 class="col-xs-12 col-sm-3">Add Product details // showme1</h3> 
      <label class="col-xs-12 col-sm-3 control-label" for="Product2"></label> 
      <div class="col-xs-12 col-sm-6"> 
       <input type="text" name="productName" class="form-control" id="productName2" required="required" placeholder="Product 2"> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label class="col-xs-12 col-sm-3 control-label"></label> 
      <div class="col-xs-12 col-sm-6" align="center" ng-click="showme=false;"><a>(or Select Fund) // showme2</a><br /></div> 
     </div> 
    </div> 

    <!-- Will display if showme == false --> 
    <div ng-show="!showme"> 
     <div class="form-group"> 
     <h3 class="col-xs-12 col-sm-3">Add Fund details // showme2 </h3> 
      <label class="col-xs-12 col-sm-3 control-label" for="Product1"></label> 
      <div class="col-xs-12 col-sm-6"> 
       <input type="text" name="fundName" class="form-control" id="fundName1" required="required" placeholder="Fund 1"> 
      </div> 
     </div> 

     <div class="form-group"> 
     <h3 class="col-xs-12 col-sm-3">Add Fund details // showme2 </h3> 
      <label class="col-xs-12 col-sm-3 control-label" for="Product2"></label> 
      <div class="col-xs-12 col-sm-6"> 
       <input type="text" name="fundName" class="form-control" id="fundName2" required="required" placeholder="Fund 2"> 
      </div> 
     </div> 

      <div class="form-group"> 
      <label class="col-xs-12 col-sm-3 control-label"></label> 
      <div class="col-xs-12 col-sm-6" ng-click="showme=true;" align="center"><a>(or Select Product) // showme1</a></div> 
     </div> 
    </div> 

    </body> 
    </html>

・ホープ、このことができます。

出典

2017-06-04 23:26:24

関連する問題

 関連する問題