个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有以下代码:
<div id="messageArea">
<div ng-messages="text1.$error">
<div ng-message="required">
Text1 is required ...
</div>
</div>
<div ng-messages="text2.$error">
<div ng-message="required">
Text2 is required ...
</div>
</div>
<div ng-messages="text3.$error">
<div ng-message="required">
Text3 is required ...
</div>
</div>
</div>
<div>Text1<input id="text1" ng-model="text1" name="text1" ng-required="true"></div>
<div>Text2<input id="text2" ng-model="text2" name="text2" ng-required="true"></div>
<div>Text3<input id="text3" ng-model="text3" name="text3" ng-required="true"></div>
我想一次显示一条错误消息。解决第一个错误后，将显示下一个错误消息。任何人都知道我该怎么做？谢谢。
最佳答案
不错的解决方案是使用 CSS 和 ng-class
var app = angular.module('app', ['ngMessages']);.error-wrapper {
color: red;
}
.error-wrapper > .view {
display: block;
}
.error-wrapper > .view ~ .view{
display: none;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-messages.min.js"></script>
</head>
<body ng-app="app">
<form ng-submit="createWallet()" name='testForm' novalidate>
<div>
<input ng-model='text1' type="text" name='text1' placeholder='text1' required>
</div>
<div>
<input ng-model='text2' type="text" name='text2' placeholder='text2' required>
</div>
<div>
<input ng-model='text3' type="text" name='text3' placeholder='text3' required>
</div>
<div class="error-wrapper">
<div ng-class="{ view: testForm.text1.$invalid }" class="error" ng-messages="testForm.text1.$error">
<div ng-message='required'>Text1 required</div>
</div>
<div ng-class="{ view: testForm.text2.$invalid }" class="error" ng-messages="testForm.text2.$error">
<div ng-message='required'>Text2 required</div>
</div>
<div ng-class="{ view: testForm.text3.$invalid }" class="error" ng-messages="testForm.text3.$error">
<div ng-message='required'>Text3 required</div>
</div>
</div>
<button>Submit</button>
</form>
</body>
</html>它只显示类 .view 的第一条错误消息，在 plunker http://plnkr.co/edit/kBSpRJLs6QA2D0jctKXB?p=preview
关于angularjs - ngMessages : how to hide or show one message after the other，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26975949/
24
4
0
我先说我是一个新手 Haskell 程序员(这些年来偶尔会修改它)但是当谈到 OOO 和命令式编程时，我有几年的时间。我目前正在学习如何使用 monad 并通过使用 monad 转换器将它们组合起来(
基本上我正在寻找的是能够从选择项的下拉列表中隐藏选项的能力。因此，从技术上讲，它们仍然是选项，但由于它们是隐藏的，因此您将无法单击它们。 我查看了文档并找到了与禁用相关的内容，不幸的是我非常希望能够隐
我正在制作一个平均堆栈应用程序，但遇到了一个问题!我尝试在第 10 个问题问完后隐藏所有内容。我使用指令 ng-hide，当我到达第 10 个问题时，该指令被设置为 true!这是代码:
好吧，我正在尝试对我发现的网站上的一项功能进行逆向工程 - 网站管理员没有回复我。有问题的网站是http://www.win-free-stuff.ca/new-contests特别是，我正在尝试构建
我正在为一个 div 设置动画。它具有以下定义: ... 我定义了以下 CSS: div.ng-hide { transition: 0.5s linear opacity; opac
我正在创建一个自定义应用程序，它将在其自己单独的 Excel 实例(新应用程序)中启动。 新创建的实例默认不可见，因此需要手动使其可见。我喜欢仅在一切设置完毕后才让我的应用程序可见 - 以避免屏幕闪烁
这是非常基本的代码: $('.myDiv').click(function() { $('.anotherDiv').hide(); alert('pause the ui');
我正在尝试为一些图片制作一个 super 简单的灯箱。基本上我有一个 div，其中包含一组使用 ng-repeat 显示的图像，我希望在单击其中一个图像时显示一个灯箱 div。我不知道为什么我的灯箱
我正在尝试为 制作动画单击按钮从左侧滑入/滑出。我正在使用 Angular 框架和 ng-show控制 显示/可见性，并将转换添加到 ng-hide样式集。 我已经成功地让 div 从左边滑入，但是
我正在写一个非常简单的幻灯片，我使用的是“常规”hide()，如下所示: jQuery("#featured li:nth-child(1)").hide('slow'); 这不仅隐藏了里，而且还慢慢
我有一个产品页面，在 Bootstrap 中以砖石格式显示 -md 和 -lg(中型和大型)屏幕的结果，其中图像可能具有不同的高度 - 对于 -sm 或 -xs，我对较小的设备使用相同高度的图像。我有
在我的活动召唤的那一刻。在其onCreate方法内部，以隐藏状态栏并以全屏模式显示。。作为向Android 30迁移的一部分，正如文档所建议的那样，我用WindowInsetsController#H
Bootstrap 显然使用了“hide”、“fade”和“in”类来进行转换。 我遇到的问题是使用“fade”和“in”会将不透明度从0更改为1。过渡效果很完美，但内容仍然占据页面上的空间，即使您看
在脱碳过程中，我现在开始使用 NSMenu 以编程方式创建菜单栏。 Carbon 似乎非常适合将标准项目添加到应用程序菜单:服务、隐藏应用程序、隐藏其他、显示全部、退出应用、甚至可以使用系统偏好设置的
我有这样的代码: Hello how are you td1 被正确隐藏，但是当 td2 被隐藏时，它
//我搜索了但没有运气，所以我开始一个新问题 :) 我有: Notification 我想要:当我点击这个 a ，它将显示/隐藏一个 div，当我在该 div 外部单击时，如果它可见，它就会隐藏。 我
Test App.js: (function() { angu
想要基于下拉(选择)隐藏或显示 AngularJS 上的元素，但由于该页面是与 QlikSense 的混搭，因此来自 Qlik 的元素不能与 ng-show 很好地配合。我用 ng-show 尝试了这
如何使下面的代码更简单、更少？ 谢谢。 012 012 $('.btn div:eq(0)').click(function(){ $('.content div').hide();
我看到一些方法可以在 jQuery UI 的对话框中隐藏标题栏和标题栏中的图标，但在 jQuery Mobile 中没有。有谁知道如何在 jQuery Mobile 中做到这一点？ 从对话框中删除/隐
我是一名优秀的程序员,十分优秀！