angularjs+bootstrap alerts的使用
2017-03-31 本文已影响156人
EldonZhao
需求背景：
项目页面需要在请求结束后返回执行结果，所以这里研究一下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>
效果展示：
alert_page.png
如上就能够出现一个告警框，但是这个告警框是静态的，如果实现动态的调用告警框和显示告警内容呢？
考虑到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信息了。
