<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>alertDemo</title>
     <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
     <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
     <script type="text/javascript" src="ui-bootstrap-tpls-1.3.3.min.js"></script>
     <script type="text/javascript" src="app.js"></script>
     <style type="text/css">

         .alert-fixed {
             width: 300px;
             margin-left: -150px;
             padding-top: 30px;
             padding-bottom: 30px;
             opacity: .9;
             box-shadow: 0 2px 5px #A5A5A5;
             z-index: 1060;
             position: fixed;
             left: 50%;
             text-align: center;
         }
     </style>
 </head>
 <body data-ng-app="app">
     <br/>
     <br/>
     <br/>
     <br/>
     <br/>
     <div data-ng-controller="alertController" class="container">
         <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" dismiss-on-timeout="2000" class="alert-fixed">{{alert.msg}}</uib-alert>

         <button type="button" class='btn btn-primary' ng-click="addAlert()">{{ typeSwitch }}</button>
     </div>

 </body>
 </html>
 var app = angular.module('app', ['ui.bootstrap']);

 app.controller('alertController', function($scope){
       $scope.alerts = [
       ];
       $scope.typeSwitch = false;
       $scope.addAlert = function() {
           if (!$scope.typeSwitch) {
               $scope.alerts.push({type: 'success', msg: '开启关怀成功!'});
               $scope.typeSwitch = true;
           } else {
             $scope.alerts.push({type: 'warning', msg: '关闭关怀成功!'});
             $scope.typeSwitch = false;
           }
       };

       $scope.closeAlert = function(index) {
         $scope.alerts.splice(index, 1);
       };
 });

angular-ui-alert的更多相关文章

  1. [mobile angular ui 1.2]桌面环境下如何自动隐藏左侧的sidebar？how to hide left sidebar on desktop browser by default?

    使用mobile angular ui 1.2开发,在默认情况下,桌面浏览器中sidebar-left是默认打开的,怎么才能在程序初始打开时关闭sidebar-left呢? 目前我找到的唯一可行办法就 ...

  2. [译]发布ABP v0.19包含Angular UI选项

    发布ABP v0.19包含Angular UI选项 ABP v0.19已发布,包含解决的~90个问题和600+次提交. 新功能 Angular UI 终于,ABP有了一个SPA UI选项,使用最新的A ...

  3. Angular -ui - BootStrap组件的解释以及使用

    关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...

  4. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  5. angular ui $modal 使用 option

    $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示ht ...

  6. Angular UI框架 Ng-alain @delon的脚手架的生成开发模板

    前言 首先感谢下 cipchk基于 Ng-Zorror 框架上制作的ng-alain . 之前很早就关注了 ng-alain,今天得空折腾了下. 折腾的时候发现官方文档有些坑,没有写清楚,所以我作为一 ...

  7. 规范 : angular ui router path & params

    在seo文章中提到url的path 必须是 why-us,而不是whyUS 所以定了规范,所有的path 必须why-us path ?后尾的是用来filter的,所以可以WhyUs 如果是不需要给s ...

  8. [mobile angular ui]MAUI中的font awesome图标

    MAUI中用font awesome替换了glyphicon,但是FA中都有哪些可用的图标呢,在网上搜了一张font awesome的对照表,使用时记着把其中的icon-xxx替换为fa-xxx就可以 ...

  9. angular ui 路由传参

    1. ui-sref.$state.go 的区别 ui-sref 一般使用在 <a>...</a>: $state.go('someState')一般使用在 controlle ...

  10. 开始学习Angular Mobile UI

    介绍 Mobile AngularUI 可以让你使用Twitter Booostrap和Angular JS来开发混合移动App和桌面应用程序. 下面是是一些贯穿整个项目的步骤,我强烈的建议你去继续阅 ...

随机推荐

  1. 单元测试（Spring）

    单元测试是指对软件中的最小可测试单元进行的检查和验证,是软件开发过程中要进行的最低级别的测试活动,软件的独立单元将在与程序的其他部分相隔离的情况下进行测试. 单元测试好处:提高代码质量(实现功能.逻辑 ...

  2. html学习笔记 - sublime text 插件安装

    command + shift + p 呼出搜索界面 输入 Packge Control:Install Package 进入到插件搜索列表 Emmet -- >快速生成html标签结构 Emm ...

  3. C# 特性（Attribute）

    个人定义:不侵入对象的情况下,添加对象附注信息. 官方定义:将预定义的系统信息或用户定义的自定义信息与目标元素相关联.目标元素可以是程序集.类.构造函数.委托.枚举.事件.字段.接口.方法.可移植可执 ...

  4. Neo4j 第五篇：批量更新数据

    相比图形数据的查询,Neo4j更新图形数据的速度较慢,通常情况下,Neo4j更新数据的工作流程是:每次数据更新都会执行一次数据库连接,打开一个事务,在事务中更新数据.当数据量非常大时,这种做法非常耗时 ...

  5. Python-快速排序

    算法思想:快速排序运用了分而治之的思想,即在所选数组中选择一个基准(任选一个都可以),以改基准为基础,将小于该基准的元素都移动基准的左边,大于该基准的数据都移动到右边,然后对左右两边进行递归处理.同样 ...

  6. Hybrid App开发之JavaScript基础

    前言: 前面学习了html和css的基本使用,今天开始学习JavaScript的使用. 什么是JavaScript JavaScript是一种基于对象(Object)和事件驱动(Event Drive ...

  7. 【2017-06-06】Ajax完整结构、三级联动的制作

    一.Ajax完整结构 $.ajax({ url:"Main.ashx", data:{}, dataType:"json", type:"post&q ...

  8. Selenium WebDriver + python 自动化测试框架

    目标 组内任何人都可以进行自动化测试用例的编写 完全分离测试用例和自动化测试代码,就像写手工测试用例一下,编写excel格式的测试用例,包括步骤.检查点,然后执行自动化工程,即可执行功能自动化测试用例 ...

  9. Xamarin控件使用之GridView

    [Activity(Label = "MainGridViewActivity", LaunchMode = LaunchMode.SingleTop)]//设置Activity启 ...

  10. 使用java实现发送邮件的功能

    首先要在maven添加javamail支持 <dependency> <groupId>javax.activation</groupId> <artifac ...