如何使用ng-if顯示或隱藏輸入字段？

相當新的角JS和需要一些幫助。如何使用ng-if來顯示或隱藏不同的輸入字段？我目前使用ng-show，但它並沒有完全移除DOM，因此在驗證過程中很難。我希望在特定div內顯示的輸入字段在被選中時變爲強制僅限。如何使用ng-if顯示或隱藏輸入字段？

當我點擊選擇基金，我想顯示showme2股利和領域成爲強制性的。當我點擊選擇產品，我希望顯示showme1 div，並將這些字段設置爲強制。請參閱下面我當前的代碼：

<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

那麼當你將'ng-show'改爲'ng-if'時會發生什麼？他們都期望布爾表達式 – charlietfl

@charlietfl是的。如何進行ng-if工作？乾杯。 – Pro86

這甚至不回答問題。如果你想在這裏獲得幫助，需要更詳細些。花一些時間閱讀[問]和[mcve] – charlietfl

參考this計算器的答案，以瞭解如何NG-如果使用。

可以使用NG-如果實現如果（）{..}其他{..}在Angular.js。
<div ng-if="data.id == 5"> 
 
</div> 
<div ng-if="data.id != 5"> 
 
</div>

此外，我修改您的代碼段在CodePen使用NG-如果在這裏看到。 https://codepen.io/silicaRich/pen/PjwwPv

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

如何使用ng-if顯示或隱藏輸入字段？

回答

相關問題