如何使用ng-if显示或隐藏输入字段？
角JS很新，需要一些帮助。如何使用ng-if显示或隐藏不同的输入字段？我目前正在使用ng-show，但它并没有完全删除DOM，因此在验证期间很困难。我希望在特定div中显示的输入字段仅在选择时成为强制性的。
当我单击选择基金时，我希望显示show me2 div并强制字段。当我单击选择产品时，我希望显示show me1 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>
共有1个答案
参考此stackoverflow答案以了解如何使用ng if。
您可以使用ng-if来实现如果（）{...}否则{...}在ngular.js.
<div ng-if="data.id == 5">
<!-- If block -->
</div>
<div ng-if="data.id != 5">
<!-- Your Else Block -->
</div>
此外，我已经在代码笔中修改了您的代码片段，以使用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>
希望这有帮助。
-
对于 被选中的国家 ，只显示 输入线 或者 输出线 只显示输入线 只显示输出线 controller.showInOnly(true); controller.showInOnly(false); controller.showOutOnly(true); controller.showOutOnly(false);
-
排除不显示字段 Model.findAll({ attributes: { exclude: ['baz'] } });
-
问题内容： 如何使用JSF显示/隐藏组件？我目前正尝试在javascript的帮助下做同样的事情，但没有成功。我不能使用任何第三方库。 谢谢| 阿比 问题答案： 通常，您需要通过其clientId获得该控件的句柄。本示例使用带有请求范围绑定的JSF2 Facelets视图来获取另一个控件的句柄： 确切的操作方式取决于您正在使用的JSF版本。有关较早的JSF版本，请参见此博客文章：JSF：使用组件标
-
问题内容： 在我的脚本中有三个div。我想在第一行悬停时显示div ，而在第二行悬停时显示。否则，我想默认显示div 。 但它永远不会显示带有的div 。 问题答案： 你需要 原始CSS中的问题是in css选择器启动了一个全新的选择器。它没有结合..所以意味着和。您将其设置为始终对所有元素都隐藏。
-
本文向大家介绍如何使用animate()，隐藏和显示元素？，包括了如何使用animate()，隐藏和显示元素？的使用技巧和注意事项，需要的朋友参考一下 使用和方法来隐藏和显示元素。 示例 您可以尝试运行以下代码，以了解如何使用方法来隐藏和显示元素：
-
问题内容： 对于我正在做的网站，我想加载一个div，然后隐藏另一个，然后有两个按钮可以使用JavaScript在div之间切换视图。 这是我当前的代码 替换div2的第二个功能不起作用，但第一个功能起作用。 问题答案： 如何显示或隐藏元素： 为了显示或隐藏元素，请操纵元素的style属性。在大多数情况下，您可能只想更改元素的属性： 或者，如果您仍然希望元素占用空间（例如，如果您要隐藏表格单元格），