I am trying to display some alerts with AngularJS, see / - 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: .
What have I done wrong? Thanks in advance!
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!
Share Improve this question asked Oct 16, 2013 at 14:09 TenziTenzi 1011 gold badge6 silver badges12 bronze badges1 Answer
Reset to default 4Move 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