在Bootstrap + Angular中顯示一個在另一個下方的警報

我使用我的屏幕，使用Bootstrap，我希望顯示一個在另一個下面的警報消息。問題是我有一個CSS類的所有警報AngularJS在屏幕上重複（我正在使用ng-repeat來顯示錯誤消息）。在Bootstrap + Angular中顯示一個在另一個下方的警報

當我使用position: absolute來顯示頁面頂部的警報時，沒關係，但是當用戶做了一些會產生錯誤信息的東西時，警報就會在另一個下面顯示，並且我想顯示一個在另一個下面。

我的警覺，它只是像這樣：

<alert class="alert-position" ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg | translate}}</alert>

我的CSS類警報的位置是：

.alert-position{ 
    position: relative; 
    margin-top: 5px!important; 
    top: 0; 
    left:0; 
    width: 100%; 
}

，我怎麼能顯示此消息一個在另一個之下，使用ng-repeat任何想法？

在此先感謝！

來源

2015-04-02 Lucas Lira

你爲什麼不使用像通知指令（HTTP：//cgross.github .io/angular-notify/demo /）或Growl（https：// git hub.com/marcorinck/angular-growl）？ – 2015-04-02 12:24:38

嗨@JeremyThille感謝您的幫助......其實我試圖做到沒有任何組件，但我真的很喜歡這個！ :) – 2015-04-02 12:32:16

爲什麼不使用使用角引導？ – roxid 2015-04-02 12:34:12

這是你在找什麼？

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

來源

2015-04-02 12:36:29 roxid

正是這樣，但消息必須顯示在頂部，問題是我注入我的網頁的內容在一個容器... – 2015-04-02 12:39:24

只是爲了使事情清楚，我有一個母版頁（即消息必須出現），並且我有一個Angular Directive將我的頁面內容注入到我的Body中... – 2015-04-02 12:40:17

顯示代碼please.post snippet.may是我們可以幫助您的。 – roxid 2015-04-02 12:41:49

在Bootstrap + Angular中顯示一個在另一個下方的警報

回答

相關問題