我的屏幕使用 Bootstrap，我想在另一个下方显示警报消息。问题是我有一个 CSS 类用于 AngularJS 在屏幕上重复的所有警报(我使用 ng-repeat 来显示错误信息)。
当我使用 position: absolute 在页面顶部显示警报时，没问题，但是当用户执行生成错误消息的操作时，警报是一个在另一个下面，并且我想在另一个下方显示一个。
我的alert是这样的:
<alert class="alert-position" ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg | translate}}</alert>
我的 CSS 类 alert-position 是:
.alert-position{
position: relative;
margin-top: 5px!important;
top: 0;
left:0;
width: 100%;
}
关于如何使用 ng-repeat 逐条显示此消息，我有什么想法吗？
提前致谢!
最佳答案
这是您要找的东西吗？？
PLNKR : http://plnkr.co/edit/o0jtVnLRpHXXukq5hANf?p=preview
HTML :
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AlertDemoCtrl">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
<button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>
</body>
</html>
控制者
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) {
$scope.alerts = [
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
];
$scope.addAlert = function() {
$scope.alerts.push({msg: 'Another alert!'});
};
$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
});
关于javascript - 在 Bootstrap + Angular 中显示一个低于另一个的警报，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29412736/