bootstrap 加载时显示反馈字形
bootstrap feedback glyphicons showing on load
为什么我的反馈字形在加载页面时出现?
笨蛋 - http://plnkr.co/edit/dRtZUoDP0xUwhI3SWVrV?p=preview
HTML
<div class="row">
<div class="col-xs-5">
<div class="form-group" ng-class="{ 'has-success has-feedback' : infoForm.cardExpMonth.$valid }">
<label class="control-label">Expiration Month</label>
<div class="right-inner-addon">
<input type="text" class="form-control" ng-model="newCard.expirationMonth" required cc-exp-month name="cardExpMonth" placeholder="MM" />
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="form-group" ng-class="{ 'has-success has-feedback' : infoForm.cardExpYear.$valid }">
<label class="control-label">Expiration Year</label>
<div class="right-inner-addon">
<input type="text" class="form-control" ng-model="newCard.expirationYear" required cc-exp-year name="cardExpYear" placeholder="YY" />
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
只是在图标上使用 ng-show
的快速解决方法,这样就够了吗?
<div class="row">
<div class="col-xs-5">
<div class="form-group" ng-class="{ 'has-success has-feedback' : infoForm.cardExpMonth.$valid }">
<label class="control-label">Expiration Month</label>
<div class="right-inner-addon">
<input type="text" class="form-control" ng-model="newCard.expirationMonth" required cc-exp-month name="cardExpMonth" placeholder="MM" />
<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="infoForm.cardExpMonth.$valid" aria-hidden="true"></span>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="form-group" ng-class="{ 'has-success has-feedback' : infoForm.cardExpYear.$valid }">
<label class="control-label">Expiration Year</label>
<div class="right-inner-addon">
<input type="text" class="form-control" ng-model="newCard.expirationYear" required cc-exp-year name="cardExpYear" placeholder="YY" />
<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="infoForm.cardExpYear.$valid" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
为什么我的反馈字形在加载页面时出现?
笨蛋 - http://plnkr.co/edit/dRtZUoDP0xUwhI3SWVrV?p=preview
HTML
<div class="row">
<div class="col-xs-5">
<div class="form-group" ng-class="{ 'has-success has-feedback' : infoForm.cardExpMonth.$valid }">
<label class="control-label">Expiration Month</label>
<div class="right-inner-addon">
<input type="text" class="form-control" ng-model="newCard.expirationMonth" required cc-exp-month name="cardExpMonth" placeholder="MM" />
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="form-group" ng-class="{ 'has-success has-feedback' : infoForm.cardExpYear.$valid }">
<label class="control-label">Expiration Year</label>
<div class="right-inner-addon">
<input type="text" class="form-control" ng-model="newCard.expirationYear" required cc-exp-year name="cardExpYear" placeholder="YY" />
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
只是在图标上使用 ng-show
的快速解决方法,这样就够了吗?
<div class="row">
<div class="col-xs-5">
<div class="form-group" ng-class="{ 'has-success has-feedback' : infoForm.cardExpMonth.$valid }">
<label class="control-label">Expiration Month</label>
<div class="right-inner-addon">
<input type="text" class="form-control" ng-model="newCard.expirationMonth" required cc-exp-month name="cardExpMonth" placeholder="MM" />
<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="infoForm.cardExpMonth.$valid" aria-hidden="true"></span>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="form-group" ng-class="{ 'has-success has-feedback' : infoForm.cardExpYear.$valid }">
<label class="control-label">Expiration Year</label>
<div class="right-inner-addon">
<input type="text" class="form-control" ng-model="newCard.expirationYear" required cc-exp-year name="cardExpYear" placeholder="YY" />
<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="infoForm.cardExpYear.$valid" aria-hidden="true"></span>
</div>
</div>
</div>
</div>