CODEWITHSUNDEEP
angularjstwitter-bootstrap-3angular-ui-bootstrap
Ken
Ken

Reputation: 3141

Unable to change alert color in UI Bootstrap

I am trying to change the colors for alerts using UI Bootstrap similar to the example on the the UI Bootstrap homepage. But when I use the code below, the alerts are all in the alert-warning color. Any thoughts on what I'm doing wrong?

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

Here's a plunker

Upvotes: 2

Views: 1201

Answers (1)

Julien
Julien

Reputation: 2246

You have to replace your type from

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

to

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

In your scope, the object alertForm.alert doesn't exist, thus alertForm.alert.type is undefined. So the default type of the alert is used which is warning.

You can find the correct version of your Plunker here

Upvotes: 2

Related Questions