gpt4 book ai didi

twitter-bootstrap - 当 Angular 输入有错误时,在焦点上显示 Bootstrap 工具提示

转载 作者:行者123 更新时间:2023-12-04 08:52:34 25 4
gpt4 key购买 nike

此示例取自 angularjs's docs

<form name="myForm" ng-controller="Ctrl">
userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span>
</form>

我想实现相同的行为,但使用 Bootstrap 工具提示。我查看了 Angular UI-Bootstraped 项目 ( http://angular-ui.github.io/bootstrap/),但不知道如何执行此操作。

就像是:
<input type="text" value="Click me!"
tooltip="See? Now click away..."
tooltip-trigger="focus"
tooltip-placement="right"
tooltip-enabled="myForm.input.$error.required" <--- pseudo code
/>

最佳答案

我尝试了几种方法,看起来您只能从 angular-bootstrap 修改源代码以获得正确的解决方案。但。有一个“hacky”解决方案,也许它会帮助你,甚至这就是你所需要的(来自 angular-bootstrap 和 angular-input 的示例):

<form name="myForm" class="my-form">
userType: <input style="width: 50px;" name="input" ng-model="userType" required value="Click me!" tooltip="{{myForm.$valid ? '' : 'See? Now click away...'}}" tooltip-trigger="focus" tooltip-placement="right" class="form-control">
<span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
<tt>userType = {{userType}}</tt><br>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
</form>

same in plunker.

基本上在这里,您只需从工具提示中删除文本,它就会隐藏起来。

关于twitter-bootstrap - 当 Angular 输入有错误时,在焦点上显示 Bootstrap 工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18107986/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com