javascript - 为什么 ngMessages 警报只出现一次?

标签 javascript jquery angularjs twitter-bootstrap ng-messages

为什么 ngMessages 警报只出现一次? 当我从 Bootstrap 选项中使用 (data-dismiss="alert"class="close") 时,警报被隐藏,但随后它再也不会出现。

<body ng-app="ngMessagesExample">
  <form name="myForm">
    <label>
      Enter your name:
      <input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
    </label>
    <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

    <div ng-messages="myForm.myName.$error">
      <div role="alert" class="alert alert-danger alert-dismissible fade in">
        <button aria-label="Close" data-dismiss="alert" class="close" type="button">
          <span aria-hidden="true">when close never display again -> ×</span>
        </button>
        <div ng-message="required">You did not enter a field</div>
        <div ng-message="minlength">Your field is too short</div>
        <div ng-message="maxlength">Your field is too long</div>
      </div>
    </div>
  </form>
</body>

codepen: http://codepen.io/mescal/pen/PZpWjd?editors=101

谢谢!

最佳答案

试试这个:

<body ng-app="ngMessagesExample">
  <form name="myForm">
    <label>
      Enter your name:
      <input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
    </label>
    <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

    <div ng-messages="myForm.myName.$error" ng-show="myForm.myName.$touched">
        <div ng-message="required">You did not enter a field</div>
        <div ng-message="minlength">Your field is too short</div>
        <div ng-message="maxlength">Your field is too long</div>
    </div>
  </form>
</body>

这将在用户触摸该字段时显示/隐藏错误消息,但不一定对其进行任何更改。您不需要手动删除错误消息的按钮,因为如果用户输入符合您的条件,错误消息将自动隐藏。您可以将 $touched 替换为 $pristine 或 $dirty,以根据用户是否未输入任何内容或已在字段中输入内容来触发错误消息。

关于javascript - 为什么 ngMessages 警报只出现一次?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34621126/

相关文章:

javascript - 如何全局存储颜色,以便它们在 js、css 和 html 中可见?

javascript - 通过变量创建简单页面

javascript - 如何在javascript中使用数组填充来显示用户输入的文本或数字?

javascript - 如何对多个元素使用悬停速度

javascript - Jasmine 测试不会进入 promise 的 then 部分

javascript - 当使用正则表达式限制为 24 个字符时,ng-pattern 不起作用

javascript - Vue.js 图像 v-for 绑定(bind)

javascript - 如何设置 Nivo Slider 缩略图的样式?

javascript - 逐格平滑滚动

javascript - 在 Angular 表达式中使用 jQuery 选择器的结果