CODEWITHSUNDEEP
javascripttwitter-bootstrapangularjs
Tenzi
Tenzi

Reputation: 101

ng-show on AngularJS alert

I am trying to display some alerts with AngularJS, see http://angular-ui.github.io/bootstrap/ - alert section. I want to modify the example to show only the alerts that have a "show" attribute set to true:

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

In the alert tag I have added ng-show="alert.show", but it seems it does not display any alert. You can find the code here: http://plnkr.co/edit/Qbv4A9u1SnQeJy9o81lK?p=preview.

What have I done wrong? Thanks in advance!

Upvotes: 1

Views: 16024

Answers (1)

dmahapatro
dmahapatro

Reputation: 50245

Move ng-repeat and ng-show to a parent div.

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

ng-show is a directive by itself which I am skeptical is not working in hand with alert directive from UI Bootstrap.

Modified Plunker

Upvotes: 4

Related Questions