在 Bootstrap + Angular 中显示一个低于另一个的警报答案

【问题标题】：Show alert one below the other in Bootstrap + Angular在 Bootstrap + Angular 中显示一个低于另一个的警报
【发布时间】：2016-10-23 21:45:29
【问题描述】：

我的屏幕使用Bootstrap，我想在另一个下方显示警报消息。问题是我有一个CSS 类用于所有AngularJS 在屏幕上重复的警报（我使用ng-repeat 来显示错误消息）。

当我使用position: absolute 在页面顶部显示警报时，没关系，但是当用户执行生成错误消息的操作时，警报是一个在另一个之下，我想在下面显示一个其他。

我的提醒是这样的：

<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 将这条消息一个接一个地显示吗？

提前致谢！

【问题讨论】：

为什么不使用 Notify (cgross.github.io/angular-notify/demo) 或 Growl (github.com/marcorinck/angular-growl) 之类的指令？
嗨@JeremyThille 感谢您的帮助...实际上我试图在没有任何组件的情况下做到这一点，但我真的很喜欢这个！ :)
为什么不使用 Use angular bootstrap??
我正在使用...问题是我的页面被注入到正文中，我必须在顶部显示消息，即我的 MasterPage...这是我的两个单独的文件代码...
你不能把你重复的包裹在另一个 div 中，并且绝对定位那个 div 吗？ div 中的所有内容都会正确流动。

标签： javascript css angularjs twitter-bootstrap

【解决方案1】：

这是你要找的吗？？

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);
  };
});

【讨论】：

正是这个，但消息必须显示在顶部，问题是我将我的页面内容注入容器...
为了清楚起见，我有一个母版页（必须显示消息），并且我有一个 Angular 指令将我的页面内容注入我的正文...
请显示代码。post sn-p.也许我们可以帮助你。
这是我的 plunker 代码：plnkr.co/edit/59kglp7UX9yokD8P0Dgb 我想在页面顶部显示一个在另一个下方的警报...我可以这样做吗？
@LucasLira 你可以在 css 的帮助下做到这一点。逻辑保持不变。