angular-bootstrap 如何为警报小部件设置 class

Question

我正在使用 angular-bootstrap

http://angular-ui.github.io/bootstrap/

对于简单的按钮，我们可以设置class如

<button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">

或使用我的习惯 class

class="my-cool-button"

但是对于警报，

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

颜色是green。我尝试用 purple background-color 添加 class="my-alert-success"，但它仍然是 green。当我删除 type="success" 时，它变成 yellow。

Answer 1

向元素 <alert/> 添加 class 并覆盖样式。我在下面添加了一个 class alert-purple。 HTML

<div ng-controller="AlertDemoCtrl">
  <alert ng-repeat="alert in alerts" close="closeAlert($index)" class="alert-purple">{{alert.msg}}</alert>
  <button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>

CSS

.alert-purple {
    background-color: rgb(216, 194, 216);
    border-color: purple;
    color: purple;
  }

Plunkr Demo 1

更新

我刚注意到。警报指令将 class 添加为 "alert-"+type。因此，只需将类型称为 purple 或您想要的类型，然后在前面创建与 alert- 同名的 class。根据需要覆盖样式。

参见Plnkr Demo 2。检查 JS 文件。我将类型更改为 "purple".

JS

$scope.alerts = [
    { type: 'purple', msg: 'Oh snap! Change a few things up and try submitting again.' },
    { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
  ];

CSS

.alert-purple {
    background-color: rgb(216, 194, 216);
    border-color: purple;
    color: purple;
  }

HTML

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

angular-bootstrap 如何为警报小部件设置 class

angular-bootstrap how to set class for alert widget

twitter-bootstrap

angularjs

angular-ui

angular-bootstrap