<!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. ELK logstash 处理MySQL慢查询日志（初步）

    写在前面:在做ELK logstash 处理MySQL慢查询日志的时候出现的问题: 1.测试数据库没有慢日志,所以没有日志信息,导致 IP:9200/_plugin/head/界面异常(忽然出现日志数 ...

  2. aync await 进一步探索

    aync await 进一步探索 首先来个例子 class Program { static int index = 1; static void Log(string str) { Console. ...

  3. [刷题]Codeforces 746G - New Roads

    Description There are n cities in Berland, each of them has a unique id - an integer from 1 to n, th ...

  4. Java学习笔记——排序算法之快速排序

    会当凌绝顶,一览众山小. --望岳 如果说有哪个排序算法不能不会,那就是快速排序(Quick Sort)了 快速排序简单而高效,是最适合学习的进阶排序算法. 直接上代码: public class Q ...

  5. PHP面向对象之解释器模式

    在博客园逛了1年多,从来都是看文章但没发表过什么文章.主要是因为技术太菜了,只有学习的份,自己那点水平实在也没什么好去分享的.但是最近在看 “深入PHP面向对象模式与实践” ,学习书中的内容后瞬间觉得 ...

  6. 028hibernate缓存(性能优化策略)

    一级缓存 二级缓存 查询缓存 缓存是为了提高性能 变化不是很大,相对静态的对象放入缓存 对象的创建比较耗时

  7. C#访问ORALCE数据库

    随着时间的推移知识也在更新,原来可用的技术也会被淘汰或更新. framework4.0开始不再支持System.Data.OracleClient了,但是令人欣慰的是ORACLE公司自己出了一个Ora ...

  8. LinkedList源码解读

    一.内部类Node数据结构 在讲解LinkedList源码之前,首先我们需要了解一个内部类.内部类Node来表示集合中的节点,元素的值赋值给item属性,节点的next属性指向下一个节点,节点的pre ...

  9. javaSE_08Java中static、继承、重写

    一.Static 学习静态这个关键字,关键是抓住两个点: 1,关注其语法特点 2,关注其使用场景 案例讲解: 我们先从静态变量开始,当一个成员变量加上static修饰之后,会是一个什么效果? 比如创建 ...

  10. java设计模式之 装饰器模式

    装饰器模式 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构. 这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装. 这种模式创建了一个装 ...