<!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. c# 内存的具体表现- 通用类型系统 深拷贝 浅拷贝 函数传参

    c# 通用类型系统 及变量在 深拷贝 浅拷贝 函数传参 中的深层次的表现 在编程中遇到了一些想不到的异常,跟踪发现,自己对于c#变量在内存上的表现理解有偏差,系统的学习并通过代码实验梳理了各种情况下, ...

  2. Linux主机通过代理服务器进行网络连接

    公司的不允许访问外网,但是访问外网需要配置代理,window配置均好配置,在Linux的命令行底下,一般的程序都是使用http_proxy和ftp_proxy这两个环境变量来获得代理设置的.1.在/e ...

  3. 用C语言模仿Python函数

    首先得说明一点,C 语言不是函数式编程语言,要想进行完全的函数式编程,还得先写个虚拟机,然后再写个解释器才行(相当于 CPython ). 下面我们提供一个例子,说明 C 语言函数可以"适度 ...

  4. c语言项目开发流程一部曲

    一.c项目开发总体分如下图所示 二.对每一步的解析 1.需求文档分析,本例以电子词典作为例子 列出每一个需求以及每一个需求的每一个特点,将其归纳 为一张表. 2.设计数据结构 设计数据结构,也就是确定 ...

  5. PHP中array_merge函数与array+array的区别

    在PHP中可以使用array_merge函数和两个数组相加array+array的方式进行数组合并,但两者效果并不相同,下面为大家介绍两者具体的使用区别. 区别如下: 当下标为数值时,array_me ...

  6. 五、 创建连接串连接本地数据库（ASP.NET MVC5 系列）

    1. 创建连接串连接本地SQLServer数据库 上节讲到MovieDBContext类,这个类的作用是连接数据库并将Movie对象迁移到数据库记录中.不过你会问一个问题:如何知道这个对象将连接哪个数 ...

  7. WCF(远程服务器返回错误: 400 错误的请求)

    类似相关问题有以下: WCF- restful接口 POST方式调用报错(远程服务器返回错误: 400 错误的请求) WCF Rest:不使用UriTemplate使用post方式传参解决HTTP40 ...

  8. Unity应用架构设计(10)——绕不开的协程和多线程（Part 2）

    在上一回合谈到,客户端应用程序的所有操作都在主线程上进行,所以一些比较耗时的操作可以在异步线程上去进行,充分利用CPU的性能来达到程序的最佳性能.对于Unity而言,又提供了另外一种『异步』的概念,就 ...

  9. log4j之log4j2.xml使用

    依赖jar包 log4j-api-2.6.2.jar log4j-core-2.6.2.jar log4j-slf4j-impl-2.6.2.jar slf4j-api-1.7.12.jar 在res ...

  10. Unity遮挡透明渐变

    遮挡透明若没有渐变实现方法: 1.透明中物体存在list中 2.每过一段时间(可以每帧,但是流畅性会降低)摄像机发送一条射线向玩家,out hitInfo 3.list与hitInfo比对,将在lis ...