对 Angular JS 相当陌生，需要一些帮助。如何使用 ng-if 显示或隐藏不同的输入字段？我目前正在使用 ng-show 但它并没有完全删除 DOM，因此在验证过程中变得很困难。我希望特定 div 中显示的输入字段在选择时仅成为必填字段。
当我点击选择基金时，我希望显示 showme2 div 并将字段设为必填。当我单击选择产品时，我希望显示 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>
最佳答案
引用this stackoverflow 答案以了解如何使用 ng-if。
You can use ng-if to achieve if(){..} else{..} in Angular.js.
<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>
希望这有帮助。
关于javascript - 如何使用 ng-if 显示或隐藏输入字段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44355492/