如何使用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显示或隐藏输入字段？

回答

相关问题