需求背景:
项目页面需要在请求结束后返回执行结果,所以这里研究一下alert组件的使用。
html页面开发:
bootstrap3中可以使用panel加collapse加nav组件实现手风琴。
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
效果展示:
如上就能够出现一个告警框,但是这个告警框是静态的,如果实现动态的调用告警框和显示告警内容呢?
考虑到ng-repeat可以动态增加、删除控件,所以这里可以尝试使用ng-repeat实现该功能。
动态显示告警框:
<div ng-repeat="alert in alerts" class="alert {{alert.type}} alert-dismissible fade in" role="alert">
<button type="button" class="close" aria-label="Close" data-dismiss="alert"><span aria-hidden="true">×</span></button>
<strong>{{alert.result}}</strong> {{alert.msg}}
</div>
$scope.alerts.push({type: 'alert-danger', result: 'FAILED!', msg: error.data.error});
$('#natgwTable').bootstrapTable('refresh', {silent: true});
这样在Controller中动态改变alerts变量的值时,页面就可以动态的增加减少(直至清空)alerts信息了。