<!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. Rxjava学习小记

    最近同事离职,接了个锅,里面的代码都是RxJava的味道,逼的自己不得不学习一波.看了网上的很多入门篇的博客,写的很不错.链接奉上: [Android]RxJava的使用(三)转换--map.flat ...

  2. [刷题]算法竞赛入门经典(第2版) 4-9/UVa1591 - Data Mining

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

  3. RabbitMQ 3.6.1集群搭建

    MQ的集群首先需要搭建erlang集群1.把cat /root/.erlang.cookie 内容改为一致 cat /root/.erlang.cookie 2.更改cookie文件权限 chmod ...

  4. How to change current process to background process

    Situation: there is a script or command is running, but we need to close current box/windows to do o ...

  5. OpenCV探索之路（九）：模板匹配

    模板匹配的作用在图像识别领域作用可大了.那什么是模板匹配? 模板匹配,就是在一幅图像中寻找另一幅模板图像最匹配(也就是最相似)的部分的技术. 说的有点抽象,下面给个例子说明就很明白了. 在上面这幅全明 ...

  6. SharePoint 服务器端对象迁移文件夹

    最近有个需求,写个定时迁移文件夹的小程序,因为计时器任务比较繁琐,所以选择了控制台程序.然后,用windows的计划任务执行,也许,会有广大朋友需要类似的功能,简单的分享一下代码逻辑,功能非常简单,希 ...

  7. C#控制台或应用程序中两个多个Main()方法的可行性方案

    大多数初级程序员或学生都认为在C#控制台或应用程序中只能有一个Main()方法.但是事实上是可以有多个Main()方法的. 在C#控制台或应用程序中,在多个类中,且每个类里最多只能存在一个Main() ...

  8. 编写原生Node.js模块

    导语:当Javascript的性能需要优化,或者需要增强Javascript能力的时候,就需要依赖native模块来实现了. 应用场景 日常工作中,我们经常需要将原生的Node.js模块做为依赖并在项 ...

  9. JVM-4.类加载机制

    目录 一.类加载的基础 二.类加载的过程 三.类加载器:分类 四.类加载器:双亲委托模型 五.类加载器:补充 六.初始化时机/主动引用和被动引用[关于实例初始化,参考<Java编程思想05-初始 ...

  10. Java常用类之String类练习

    1.编程. 已知字符串:"this is a test of java". 按要求执行以下操作: (1) 统计该字符串中字母s出现的次数 (2) 取出子字符串"test& ...