Question

我的屏幕使用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{
    position: relative;
    margin-top: 5px!important;
    top: 0;
    left:0;
    width: 100%;
}

如何使用ng-repeat？

了解如何将此消息一个显示在另一个之下？

提前致谢！

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

在Bootstrap + Angular中显示一个在另一个下方的警报

1 个答案: