我有这样的形式：
<div class="row" id="yesAuth">
<div class="col-md-6" ng-class="{ 'has-error': invalid.basicAuthForBackendUsername, 'has-success': valid.basicAuthForBackendUsername}">
<div class="form-group">
<label for="basicAuthForBackendUsername">basic auth username *</label>
<input type="text" name="basicAuthForBackendUsername" class="form-control" placeholder="basic auth username" ng-model="api.basicAuthForBackendUsername" ng-required="true">
<span id="helpBlock" class="help-block" ng-show="help.basicAuthForBackendUsername.required">basic auth username is required.</span> </div>
</div>
</div>
我根据选择的值显示/隐藏div。当值为“ no”时，我将隐藏div；当值为“ yes”时，我将显示div。
当我验证表单并选择值“是”时，隐藏div中的字段不会考虑ng-required。（因此出现下一页，但我不想要它，因为它是空的）。
$(function() {
$('#yesAuth').hide();
$("#basicAuth").change(function() {
if ($("#basicAuth option:selected").val() == 'yes') {
$('#yesAuth').show();
$('#basicAuthForBackendUsername').attr("ng-required", "true");
alert("VOILA" + $('#basicAuthForBackendUsername').attr("ng-required"))
} else {
$('#yesAuth').hide();
$('#basicAuthForBackendUsername').attr("ng-required", "false");
alert("VOILA" + $('#basicAuthForBackendUsername').attr("ng-required"));
}
});
});
我该如何解决我的问题？
所有代码：
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="jumbotron" ng-show="firstPage">
<h3>API builder</h3>
<form action="/publish" method="POST" name="userForm">
<div class="panel panel-default">
<div class="panel-heading"><h4>Offer</h4></div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.apiName, 'has-success': valid.apiName}">
<label for="apiName">api name *</label>
<input type="text" name="apiName" class="form-control" placeholder="api name" ng-model="api.apiName" ng-required="true">
<span id="helpBlock" class="help-block" ng-show="help.apiName.required">api name is required.</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.version, 'has-success': valid.version}">
<label for="version">version *</label>
<select name="version" id="version" class="form-control" ng-init="api.version = api.version || ''" ng-model="api.version" ng-required="true">
<option value=""></option>
<option value="beta">beta</option>
<option value="v1">v1</option>
<option value="v2">v2</option>
<option value="v3">v3</option>
<option value="v4">v4</option>
</select>
<span id="helpBlock" class="help-block" ng-show="help.version.required">version is required.</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6" ng-class="{ 'has-error': invalid.backendServiceUrl, 'has-success': valid.backendServiceUrl}">
<div class="form-group" >
<label for="backendServiceUrl">backend service URL *</label>
<input type="text" name="backendServiceUrl" class="form-control" placeholder="backend service URL" ng-model="api.backendServiceUrl" ng-required="true">
<span id="helpBlock" class="help-block" ng-show="help.backendServiceUrl.required">backend service URL is required.</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" id="basicAuth">
<label for="basicAuth">basic auth info</label>
<select name="basicAuth" class="form-control" ng-init="api.basicAuth = api.basicAuth || 'no'" ng-model="api.basicAuth" id="basicAuth" >
<option value="no">no</option>
<option value="yes">yes</option>
</select>
</div>
</div>
</div>
<div class="row" id="yesAuth">
<div class="col-md-6" ng-class="{ 'has-error': invalid.basicAuthForBackendUsername, 'has-success': valid.basicAuthForBackendUsername}">
<div class="form-group" >
<label for="basicAuthForBackendUsername">basic auth username *</label>
<input type="text" id="basicAuthForBackendUsername" name="basicAuthForBackendUsername" class="form-control" placeholder="basic auth username" ng-model="api.basicAuthForBackendUsername" >
<span id="helpBlock" class="help-block" ng-show="help.basicAuthForBackendUsername.required">basic auth username is required.</span>
</div>
</div>
<div class="col-md-6" ng-class="{ 'has-error': invalid.basicAuthForBackendPassword, 'has-success': valid.basicAuthForBackendPassword}">
<div class="form-group" >
<label for="basicAuthForBackendPassword">basic auth password *</label>
<input type="text" id="basicAuthForBackendPassword" name="basicAuthForBackendPassword" class="form-control" placeholder="basic auth password" ng-model="api.basicAuthForBackendPassword">
<span id="helpBlock" class="help-block" ng-show="help.basicAuthForBackendPassword.required">basic auth password is required.</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.apiDescription, 'has-success': valid.apiDescription}">
<label for="apiDescription">api description *</label>
<input type="text" name="apiDescription" class="form-control" placeholder="description..." ng-model="api.apiDescription" ng-required="true">
<span id="helpBlock" class="help-block" ng-show="help.apiDescription.required">api description is required.</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.useProxy, 'has-success': valid.useProxy}">
<label for="useProxy">backend exposed on the Internet *</label>
<select name="useProxy" class="form-control" ng-init="api.useProxy = api.useProxy || 'yes'" ng-model="api.useProxy" ng-required="true">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="iconUrl">icon URL</label>
<input type="text" name="iconUrl" class="form-control" placeholder="icon URL" ng-model="api.iconUrl">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="statusUrl">get status URL</label>
<input type="text" name="statusUrl" class="form-control" placeholder="get status URL" ng-model="api.statusUrl">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.approvalMode, 'has-success': valid.approvalMode}">
<label for="approvalMode">approval mode *</label>
<select name="approvalMode" class="form-control" ng-init="api.approvalMode = api.approvalMode || 'auto'" ng-model="api.approvalMode" ng-required="true">
<option value="auto">auto</option>
<option value="manual">manual</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.orangeInternalContact, 'has-success': valid.orangeInternalContact}">
<label for="orangeInternalContact">orange internal contact *</label>
<input type="text" name="orangeInternalContact" class="form-control" placeholder="orange internal contact" ng-model="api.orangeInternalContact" ng-required="true">
<span id="helpBlock" class="help-block" ng-show="help.orangeInternalContact.required">orange internal contact is required.</span>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading"><h4><input type="checkbox" ng-model="api.swagger"> Generation from swagger</h4></div>
<div class="panel-body" ng-show="api.swagger">
<div class="form-group" ng-class="{ 'has-error': invalid.swaggerSource, 'has-success': valid.swaggerSource}">
<label for="generateFromIntegrationSwaggerUrl">
<input type="radio" name="swaggerSource" ng-model="api.swaggerSource" value="url" checked ng-required="api.swagger && api.swaggerSource != 'file'">
Swagger URL hosted by the integration backend
</label>
<span id="helpBlock" class="help-block" ng-show="help.swaggerSource.required">One option is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': invalid.swaggerSource, 'has-success': valid.swaggerSource}">
<label for="swaggerFile">
<input type="radio" name="swaggerSource" ng-model="api.swaggerSource" value="file" ng-required="api.swagger && api.swaggerSource != 'url'">
Upload Swagger 2.0 JSON file
</label>
<span id="helpBlock" class="help-block" ng-show="help.swaggerSource.required">One option is required</span>
<input type="file" file-model="myFile" name="swaggerFile" class="btn btn-info">
</div>
</div>
</div>
<button ng-click="publish()" class="btn btn-lg btn-primary" type="button">Publish</button>
<p ng-show="validatingStatus==='loading'">
<div ng-show="validatingStatus==='loading'" class="alert alert-info" role="alert">Please wait. Operation in progress. <img src="<c:url value="/resources/images/ajax-loader.gif" />"></div>
</p>
</form>
</div>
<script>
$(function () {
$('#yesAuth').hide();
$("#basicAuth").change(function () {
if($("#basicAuth option:selected").val() == 'yes'){
$('#yesAuth').show();
$('#basicAuthForBackendUsername').attr("ng-required","true");
$('#basicAuthForBackendPassword').attr("ng-required","true");
alert("VOILA" + $('#basicAuthForBackendPassword').attr("ng-required"))
}
else{
$('#yesAuth').hide();
$('#basicAuthForBackendUsername').removeAttr("ng-required");
$('#basicAuthForBackendPassword').removeAttr("ng-required");
alert("VOILA" + $('#basicAuthForBackendPassword').attr("ng-required"));
}
});
});
</script>
非常感谢。
当您ngModel用于绑定value时api.basicAuth，可以将Angular表达式直接传递给ngRequired指令。
用它作为你的看法
<input type="text" ng-required="api.basicAuth == 'yes'" ng-model="api.basicAuthForBackendUsername">
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句