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


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

刚接触Angular JS，需要帮助。如何使用ng来显示或隐藏不同的输入字段？我目前正在使用ng-show，但它不能完全删除DOM，因此在验证过程中很难做到。我希望在特定的DIV中显示的输入字段只有在选中时才成为必需的。

当我单击"选择资金"时，我希望显示ShowMe2 DIV并强制显示字段。当我单击Select Product时，我希望显示ShowMe1 DIV并强制显示字段。请参阅下面我的当前代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
         <h3 class="col-xs-12 col-sm-3">Add Product details
           <label class="col-xs-12 col-sm-3 control-label" for="Product1</label>
           
              <input type="text" name="productName" class="form-control" id="productName1" required="required" placeholder="Product 1">
           
       

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

       
           <label class="col-xs-12 col-sm-3 control-label"></label>
           (or Select Fund)<br />
       




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

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

           
           <label class="col-xs-12 col-sm-3 control-label"></label>
           (or Select Product)
相关讨论

请参考此stackoverflow答案以了解如何使用ng。

You can use ng-if to achieve if(){..} else{..} in Angular.js.

1
2
3
4
<!-- If block -->


<!-- Your Else Block -->

另外，我已经在代码笔中修改了您的代码片段以使用ng if，请参见此处。https://codepen.io/silicarich/pen/pjwwpv

JS

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

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
  <html>
  <head>
  </head>
  <body ng-app='TestApp'>

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

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

       
           <label class="col-xs-12 col-sm-3 control-label"></label>
           (or Select Fund) // showme2<br />
       
   

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

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

         
           <label class="col-xs-12 col-sm-3 control-label"></label>
           (or Select Product) // showme1
       
   

  </body>
  </html>

希望这有帮助。