我需要一个帮助。我需要显示我的按钮，而所有输入都有一些使用Angular.js的值。让我来解释下面的代码。
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Product Name :</span>
<select class="form-control" id="pro_name" ng-model="pro_name" ng-change="removeBorder('pro_name');" ng-readonly="periodread" >
<option value="">Select Product</option>
<option value="1">Britania</option>
<option value="0">Soap/option>
</select>
</div>
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Unit Cost Price :</span>
<input type="text" name="discount" id="ucp" class="form-control" placeholder="Add unit cost price" ng-model="unit_cost_price" ng-keypress="clearField('ucp');" ng-readonly="isChecked=='false'">
</div>
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Unit Sale Price :</span>
<input type="text" name="discount" id="usp" class="form-control" placeholder="Add unit sale price" ng-model="unit_sale_price" ng-keypress="clearField('usp');" ng-readonly="isChecked=='false'">
</div>
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Quantity :</span>
<input type="text" name="discount" id="quantity" class="form-control" placeholder="Add quantity" ng-model="quantity" ng-keypress="clearField('quantity');">
</div>
<div class="input-group bmargindiv1 col-md-12" ng-show="displayRadio">
<input type="radio" name="favoriteColors" ng-model="isChecked" value="true">Add new stock
<input type="radio" name="favoriteColors" ng-model="isChecked" value="false">Update stock
</div>
<input type="button" class="btn btn-success" ng-click="addProductstockData(billdata);" id="addProfileData" ng-value="buttonName" ng-show="showAddButton"/>
在我需要的代码中，当所有字段都有一些值时，按钮将显示给user.User也可以在输入字段中输入/选择值，对于某些情况，值也会在输入字段中附加另一个按钮点击。所以这里我需要当用户在输入字段中有任何值时，只有按钮会显示给用户。请帮助我。
答案 0 :(得分：1)
这是工作plunker！你的代码。
您需要做的就是在<form name="theForm" novalidate></form>中包含输入并将required属性赋予输入，并且只有在必填字段中包含某些值后才显示该按钮，例如{{1} }。希望有所帮助
答案 1 :(得分：1)
var app = angular.module('form-example', []);
app.directive('passwordValidate', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
scope.pwdValidLength = (viewValue && viewValue.length >= 8 ? 'valid' : undefined);
scope.pwdHasLetter = (viewValue && /[A-z]/.test(viewValue)) ? 'valid' : undefined;
scope.pwdHasNumber = (viewValue && /\d/.test(viewValue)) ? 'valid' : undefined;
if(scope.pwdValidLength && scope.pwdHasLetter && scope.pwdHasNumber) {
ctrl.$setValidity('pwd', true);
return viewValue;
} else {
ctrl.$setValidity('pwd', false);
return undefined;
}
});
}
};
});.input-help {
display: none;
position:absolute;
z-index: 100;
top: -6px;
left: 160px;
width:200px;
padding:10px;
background:#fefefe;
font-size:.875em;
border-radius:5px;
box-shadow:0 1px 3px #aaa;
border:1px solid #ddd;
opacity: 0.9;
}
.input-help::before {
content: "\25C0";
position: absolute;
top:10px;
left:-12px;
font-size:16px;
line-height:16px;
color:#ddd;
text-shadow:none;
}
.input-help h4 {
margin:0;
padding:0;
font-weight: normal;
font-size: 1.1em;
}
/* Always hide the input help when it's pristine */
input.ng-pristine + .input-help {
display: none;
}
/* Hide the invalid box while the input has focus */
.ng-invalid:focus + .input-help {
display: none;
}
/* Show a blue border while an input has focus, make sure it overrides everything else */
/* Overriding Twitter Bootstrap cuz I don't agree we need to alarm the user while they're typing */
input:focus {
color: black !important;
border-color: rgba(82, 168, 236, 0.8) !important;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
}
/* Show green border when stuff has been typed in, and its valid */
.ng-dirty.ng-valid {
border-color:#3a7d34;
}
/* Show red border when stuff has been typed in, but its invalid */
.ng-dirty.ng-invalid {
border-color:#ec3f41;
}
/* Show the help box once it has focus */
.immediate-help:focus + .input-help {
display: block;
}
/* Immediate help should be red when pristine */
.immediate-help.ng-pristine:focus + .input-help {
border-color:#ec3f41;
}
.immediate-help.ng-pristine:focus + .input-help::before {
color:#ec3f41;
}
/* Help hould be green when input is valid */
.ng-valid + .input-help {
border-color:#3a7d34;
}
.ng-valid + .input-help::before {
color:#3a7d34;
}
/* Help should show and be red when invalid */
.ng-invalid + .input-help {
display: block;
border-color: #ec3f41;
}
.ng-invalid + .input-help::before {
color: #ec3f41;
}
/* Style input help requirement bullets */
.input-help ul {
list-style: none;
margin: 10px 0 0 0;
}
/* Default each bullet to be invalid with a red cross and text */
.input-help li {
padding-left: 22px;
line-height: 24px;
color:#ec3f41;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAA1CAYAAABIkmvkAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAJwAAACcBKgmRTwAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wOS8xMlhq+BkAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAEA0lEQVRIie2WW2jbVRzHv//zT5rkn0ub61zaNdEiPqTC9EFRhtgJk63qg3Wr0806pswNiYgDUXxwyryCEB8UBevtaSCCDHQoboKyoVvVzfRmL2napU0mrdbl8s//dy4+dM1M28n64FsPnIdz+XzO75zfOXA0pRRWU7o/uS9FxOc+3/vlIQBgq4F3fHxvKuIPJ9cFwi9uTXU8BwDa1Uaw/aN7UusCkWRbPI5yxcTI2Bgy49kXrkrwwIedqYg/nGyLXwsJiYHBYWTGs7Cq5Kpt4cA3PXft+2rX40vhrt7OVLgplIzHYuBKoH9gCKMjGVE1LdfJl86YDAAOfN2ziZP4NODyv9/z2fanFuH7P9iWCjcFk/FYK4QSGLgEk0WeUy/3mQCgPXFs9xbBRW883NrssDvQN3hWcOLPEPGWiD94MBaPQymBoaERjI9mBSfu+fHwL+biItpjR3e6JFfloDeAaGQ9SpUycvlp6ExHJBKGYsDvgyMYH81KTsL90yuX4VoWdh3pMqSQpWBjAC3RZkgpYEkCFDA8NIqJ0UlFxI3Tr/5aB9elsau305BcloKBAFpjLeBSYGRwDBNjk4oTN06/dnYZXCcAgK1vbzYkl6VwOATihOzYlOLEjTOvn1sRXiYAgDsP32YIKUuWaXFOwtP3xrnqleAVBQBwy/M3GZy4+PnN3/4TvqJgNWVVj2lNsCZYE6wJ1gRrgv9dYAMAHHw2Bl2fUEpBVavtLPVW/78nVR/Zk4CupzVHA6zChSOK0yHv0S8GFyK4BMPhAJxOgLE03/9kYhE2dz+agKaldY8bDaEQ7D5ft7Roy+UIlCooy5LQdaZ5vVBEgGmmrT172yVxaIylmdcDm9cHc2oK1Zm8kETvLAo0pRRk8mmnEqKouVw68zVCzP8F/uccFHHoXi/sjT6Y53Mw83mhOHn8J7416wQAwPftd0ouiswwdJu/CRASkBKQAmYuBzNfWIC/O173W6llwfbeu6Yi8tDsrAQJYGICyGQAIWDO5KUkaxlcJwAASdSmaWAQHCACOAc4h6YzJi1qWymNNUHlwYcT0JDWXQbACYhGgeh6gHM4Ghuh2/R0YePNiaUCTSmFcvdDCY1paZvhht3nQ2VmGmahICSR5vQHmDt6DcozeZSnp2FdLLZHhwdq94SVd+xMaJqWtrkM2L1uVHILpy0t8igidymXExfHMzBCQbhCIdga7Onz8etqkdgkUYTZbYCSqORmULlQEIq4J3jyexMA8jdu9BRzuaKyLN3udkNjDEqICID+2hbm797Wwez24/T3vJTE3aFTP9Sd9vT1NziVEMUGr1c35+Y2b5jKnqgNKqWglMLspjs6/rj1dudie2mdao07J5s3dCzt/werJTyI1yYqpQAAAABJRU5ErkJggg==) no-repeat 2px -34px;
}
/* Set to green check and text when valid */
.input-help li.valid {
color:#3a7d34;
background-position: 2px 6px;
}
/* Set submit button */
form .btn, form.ng-valid .btn[disabled] {
display: none;
}
form.ng-invalid .btn[disabled], form.ng-valid .btn {
display: inline-block;
}
body {
padding: 20px 0;
}
input {
width: 166px
}
.form-horizontal .control-label {
width: 100px;
}
.form-horizontal .controls {
position: relative;
margin-left: 120px;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="form-example" class="row form-horizontal" novalidate>
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="email" id="inputEmail" placeholder="Email" ng-model="email" required>
<div class="input-help">
<h4>Invalid Email</h4>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input ng-model="password" class="immediate-help" password-validate required type="password" id="inputPassword" placeholder="Password">
<div class="input-help">
<h4>Password must meet the following requirements:</h4>
<ul>
<li ng-class="pwdHasLetter">At least <strong>one letter</strong></li>
<li ng-class="pwdHasNumber">At least <strong>one number</strong></li>
<li ng-class="pwdValidLength">At least <strong>8 characters long</strong></li>
</ul>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn">Create Account</button>
<button class="btn" disabled>Create Account</button>
</div>
</div>
</form>