angular-ui-alert
<!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的更多相关文章
- [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呢? 目前我找到的唯一可行办法就 ...
- [译]发布ABP v0.19包含Angular UI选项
发布ABP v0.19包含Angular UI选项 ABP v0.19已发布,包含解决的~90个问题和600+次提交. 新功能 Angular UI 终于,ABP有了一个SPA UI选项,使用最新的A ...
- Angular -ui - BootStrap组件的解释以及使用
关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- angular ui $modal 使用 option
$modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 $modal仅有一个方法open(options) templateUrl:模态窗口的地址 template:用于显示ht ...
- Angular UI框架 Ng-alain @delon的脚手架的生成开发模板
前言 首先感谢下 cipchk基于 Ng-Zorror 框架上制作的ng-alain . 之前很早就关注了 ng-alain,今天得空折腾了下. 折腾的时候发现官方文档有些坑,没有写清楚,所以我作为一 ...
- 规范 : angular ui router path & params
在seo文章中提到url的path 必须是 why-us,而不是whyUS 所以定了规范,所有的path 必须why-us path ?后尾的是用来filter的,所以可以WhyUs 如果是不需要给s ...
- [mobile angular ui]MAUI中的font awesome图标
MAUI中用font awesome替换了glyphicon,但是FA中都有哪些可用的图标呢,在网上搜了一张font awesome的对照表,使用时记着把其中的icon-xxx替换为fa-xxx就可以 ...
- angular ui 路由传参
1. ui-sref.$state.go 的区别 ui-sref 一般使用在 <a>...</a>: $state.go('someState')一般使用在 controlle ...
- 开始学习Angular Mobile UI
介绍 Mobile AngularUI 可以让你使用Twitter Booostrap和Angular JS来开发混合移动App和桌面应用程序. 下面是是一些贯穿整个项目的步骤,我强烈的建议你去继续阅 ...
随机推荐
- Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
- Maven学习-优化和重构POM
在一个复杂的项目中,项目的各个模块存在各种相互依赖关系.优化一个多模块项目的POM最好通过几步来做.总的来说,我们总是寻找一个POM中的重复或者多个兄弟POM中的重复.在多模块项目中依赖重复的模式主要 ...
- ZooKeeper监听机制
前言:Zookeeper的监听机制很多人都踩过坑,感觉实现了watcher 接口,后面节点的变化都会一一推送过来,然而并非如此. Watch机制官方声明:一个Watch事件是一个一次性的触发器,当被设 ...
- MVC中的Ajax与增删改查
自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有.刚看书的时候,以为 没什么可 ...
- 同步文件的利器-rsync
即使你只是个人用户而不是一个企业,备份你自己的数据也是非常重要的,我不想失去任何这些数据. rsync是同步文件的利器,一般用于多个机器之间的文件同步与备份,同时也支持在本地的不同目录之间互相同步文件 ...
- redis 清空缓存
redis 清空缓存 Redis 命令: flushall --> 清空整个 Redis 服务器的数据(删除所有数据库的所有 key ) flushdb --> 清空当前数据库中的所有 k ...
- 开涛spring3(8.1) - 对ORM的支持 之 8.1 概述
8.1 概述 8.1.1 ORM框架 ORM全称对象关系映射(Object/Relation Mapping),指将Java对象状态自动映射到关系数据库中的数据上,从而提供透明化的持久化支持,即把 ...
- sChart.js:一个小型简单的图表库
介绍 sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图.折线图.饼状图和环形图四种基本的图表.麻雀虽小,五脏俱全.sChart.js 基本可以满足这四种图表的需求.而它 ...
- ThinkPHP5.0版本和ThinkPHP3.2版本的区别
5.0版本和之前版本的差异较大,本篇对熟悉3.2版本的用户给出了一些5.0的主要区别. URL和路由 5.0的URL访问不再支持普通URL模式,路由也不支持正则路由定义,而是全部改为规则路由配合变量规 ...
- python脚本 随机定位坐标
import mathimport randomdef rad(dg): return (dg * math.pi / 180)def deg(rd): return (rd * 180 ...