如何使用ng-if显示或隐藏输入字段？

Question

Quite new to angular JS and need some help. Angular JS相当新，需要一些帮助。 How do I use ng-if to display or hide different input fields? 如何使用ng-if显示或隐藏不同的输入字段？ I'm currently using ng-show but it doesn't completely remove the DOM, therefore making it difficult during validation. 我目前正在使用ng-show，但是它不能完全删除DOM，因此在验证过程中很困难。 I want the input fields displaying within a specific div to become mandatory ONLY when selected. 我希望显示在特定div中的输入字段仅在被选中时才变为强制性。

When I click Select Fund , I want the showme2 div to display and the fields to become mandatory. 当我点击Select Fund时 ，我希望showme2 div显示，并且这些字段成为必填字段。 When I click Select Product , I want the showme1 div to display and the fields to become mandatory. 当我单击Select Product时 ，我希望showme1 div显示，并且这些字段成为必填字段。 See my current code below: 请参阅下面的当前代码：

<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>

Answer 1

Reference this stackoverflow answer to understand how ng-if is used. 参考此 stackoverflow答案以了解如何使用ng-if。

You can use ng-if to achieve if(){..} else{..} in Angular.js. 您可以使用ng-if在Angular.js中实现if（）{..} else {..} 。
 <div ng-if="data.id == 5">  </div> <div ng-if="data.id != 5">  </div>

Additionally, I've modified your code snippet in a CodePen to use ng-if, see here. 此外，我已经在CodePen中修改了您的代码段以使用ng-if，请参见此处。 https://codepen.io/silicaRich/pen/PjwwPv https://codepen.io/silicaRich/pen/PjwwPv

JS JS

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

HTML 的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>

Hope this helps. 希望这可以帮助。

如何使用ng-if显示或隐藏输入字段？

问题描述

1 个解决方案

解决方案1
1 2017-06-04 23:26:24

如何使用ng-if显示或隐藏输入字段？

问题描述

1 个解决方案

解决方案1 1 2017-06-04 23:26:24

解决方案1
1 2017-06-04 23:26:24