【angularjs】angularjs+bootstrap alerts的使用

需求背景：

项目页面需要在请求结束后返回执行结果，所以这里研究一下alert组件的使用。

html页面开发：

bootstrap3中可以使用panel加collapse加nav组件实现手风琴。

    

      ×
      Warning! Better check yourself, you're not looking too good.
    

效果展示：

alert_page.png

如上就能够出现一个告警框，但是这个告警框是静态的，如果实现动态的调用告警框和显示告警内容呢？
考虑到ng-repeat可以动态增加、删除控件，所以这里可以尝试使用ng-repeat实现该功能。

动态显示告警框：

    

      ×
      {{alert.result}} {{alert.msg}}
    

$scope.alerts.push({type: 'alert-danger', result: 'FAILED!', msg: error.data.error});
$('#natgwTable').bootstrapTable('refresh', {silent: true});

这样在Controller中动态改变alerts变量的值时，页面就可以动态的增加减少（直至清空）alerts信息了。

---

参考资料：

• Bootstrap3警告框alerts
• 简单实现 Angular-UI Bootstrap 的一个 alert service