<!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. 解决ajax跨域的方法原理详解之Cors方法

    1.神马是跨域(Cross Domain)   对于端口和协议的不同,只能通过后台来解决.   一句话:同一个ip.同一个网络协议.同一个端口,三者都满足就是同一个域,否则就是 跨域问题了.而为什么开 ...

  2. 《快学Scala》——控制结构和函数

    条件表达式 在Scala中if/else表达式有值,这个值就是跟在if或else之后的表达式的值.例如: if (x > 0) 1 else -1 上述表达式的值是1或-1,具体是哪一个取决于x ...

  3. hdu3652 B-number 数位DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3652 题意就是求区间内能被13整除并且包含”13“的数字的个数 感觉是比较中等的数位DP题目 我用的记 ...

  4. [笔记]我的Linux入门之路 - 04.Eclipse安装

    首先,要安装ecliose自然是先要有Java环境.在上一篇已经安装好了,不再赘述. 一.下载 Eclipse官网 下载下来的文件":eclipse-inst-linux64.tar.gz ...

  5. [刷题]算法竞赛入门经典(第2版) 4-1/UVa1589 - Xiangqi

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,0 ms) //UVa1589 #include<iostream> #incl ...

  6. 深入学习webpack（一）

    深入学习webpack(一) 模块化的相关库和工具已经很多了,包括require.js.sea.js和一些工程化工具webpack.gulp.grant.那么我们该如何选择呢? 其实,我们只需要掌握了 ...

  7. Html标签，file方式，上传文件

    恩,如果不记下来,记忆就会模糊掉. 希望自己下次看见这篇博客的时候,会解决掉疑问 ----------------------------------------------------------- ...

  8. java中String是对象还是类？详解java中的String

    有很多人搞不懂对象和类的定义.比如说java中String到底是对象还是类呢? 有人说String 既可以说是类,也可以说是对象. 其实他这么说也没问题, 类和对象其实都是一个抽象的概念. 我们可以把 ...

  9. GoodReads: Machine Learning (Part 3)

    In the first installment of this series, we scraped reviews from Goodreads. In thesecond one, we per ...

  10. 关于STM32空闲中断

    有一次做一个东西,为了尽量不占用CPU的处理数据时间,所以就使用DMA接收串口的数据,但是呢问题来了.,,,,,怎么样才能确定接收到了一条完整的数据了,,我们都知道只要打开DMA 那家伙就不停的把接收 ...