在AngularJS警报上显示ng-show

Question

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!

Answer 1

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