无法更改 UI Bootstrap 中的警报颜色

Question

我正在尝试使用 UI Bootstrap 更改警报的颜色，类似于 UI Bootstrap homepage 上的示例。但是当我使用下面的代码时，警报都是 alert-warning 颜色。对我做错了什么有什么想法吗？

HTML:

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

Javascript:

.controller('AlertFormCtrl', function(){
   var alertForm = this;
   alertForm.alerts = [

{ type: 'default', msg: 'Please complete the fields below.' },
  { type: 'success', msg: 'Successfully submitted.' }
  ];

alertForm.addAlert = function() {
  alertForm.alerts.push({type: 'danger', msg: 'Another alert!'});
  };

alertForm.closeAlert = function(index) {
  alertForm.alerts.splice(index, 1);
  };
});

这是一个plunker

Answer 1

您必须从

替换您的类型

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

到

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

在您的范围内，对象 alertForm.alert 不存在，因此 alertForm.alert.type 未定义。所以使用默认的警报类型，即 warning.

您可以找到您的 Plunker 的正确版本 here

无法更改 UI Bootstrap 中的警报颜色

Unable to change alert color in UI Bootstrap

angularjs

angular-ui-bootstrap

twitter-bootstrap-3