簡體   English   中英

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

[英]How do I use ng-if to display or hide input fields?

Angular JS相當新,需要一些幫助。 如何使用ng-if顯示或隱藏不同的輸入字段? 我目前正在使用ng-show,但是它不能完全刪除DOM,因此在驗證過程中很困難。 我希望顯示在特定div中的輸入字段在被選中時才變為強制性。

當我點擊Select Fund時 ,我希望showme2 div顯示,並且這些字段成為必填字段。 當我單擊Select Product時 ,我希望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>

參考 stackoverflow答案以了解如何使用ng-if。

您可以使用ng-if在Angular.js中實現if(){..} else {..}

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

此外,我已經在CodePen中修改了您的代碼段以使用ng-if,請參見此處。 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>

希望這可以幫助。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM