AngularJS UI
1, angular ui 自定义弹框
<script type="text/ng-template" id="stackedModal.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">{{title}}</h3>
</div>
<div class="modal-body" id="modal-body-{{name}}">
<div style="font-size: 16px;">
<p style="">{{message}}</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="checkok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="checkcancel()">Cancel</button>
</div>
</script>
var modal = $uibModal.open({
templateUrl: 'stackedModal.html',
resolve: {//这里可以将外部参数传入controller的构造函数中
ipobject: function () {
return ipobject;
}
},
controller: function ($scope, $uibModalInstance, ipobject) {
$scope.ipobject = ipobject;
$scope.title = "警告";
$scope.message = '取消启用后将不会下发该ip,确定要禁用吗?';
$scope.checkok = function () {
$uibModalInstance.close('ok');
};
$scope.checkcancel = function () {
$uibModalInstance.dismiss('cancel');
};
$uibModalInstance.result.then(function (selectedItem) {
console.info('Modal ok at: ' + new Date());
}, function () {
console.info('Modal dismissed at: ' + new Date());
$scope.ipobject.isEnable = true;
});
}
});
2, form validation
<form name="addipform">
<div class="col-md-12 pad-btn-40">
<div class="row form-group aps-form-group">
<label class="col-sm-2 control-label aps-label ">名称:
</label>
<div class="col-sm-8">
<input name="ipname" class="form-control" required ng-model="model.name"
placeholder="备注:金桥-电信"
type="text">
<!--<span style="color:red;"-->
<!--ng-show="addipform.ipname.$touched && addipform.ipname.$invalid">*</span>-->
</div>
</div>
<div class="row form-group aps-form-group">
<label class="col-sm-2 control-label aps-label ">IP地址:
</label>
<div class="col-sm-8">
<input required requireip name="ipaddress" class="form-control" ng-model="model.ip"
placeholder="IP地址:127.0.0.1"
type="text">
<!--<span style="color:red;"-->
<!--ng-show="addipform.ipaddress.$touched && addipform.ipaddress.$invalid">*</span>-->
</div>
</div>
</div> </form>
<script>
//main controller
app.directive('requireip', function () {
return {
require: 'ngModel',
link: function (scope, element, attr, mCtrl) {
function myValidation(value) {
var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/g; if (value.match(reg)) {
mCtrl.$setValidity('charE', true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
} mCtrl.$parsers.push(myValidation);
}
}
}); </script>
AngularJS UI的更多相关文章
- angularjs UI Libraries
angularjs UI Libraries ● ng-bootstrap is currently available. ● PrimeNG has largest number of compon ...
- UIBootatrap:是由AngularJS UI团队编写的纯AngularJS实现的Bootstrap组件
本文为翻译文档.原文是https://angular-ui.github.io/bootstrap/(需要FQ). 准备工作: 依赖关系:这个库中包含一组基于Bootstrap组件和CSS的原生Ang ...
- [转]AngularJS+UI Router(1) 多步表单
本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现 在线demo演示地址https://rawgit.com/dream ...
- angularJS ui router 多视图单独刷新问题
场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...
- Angularjs ui router,路由嵌套 父controller执行问题
解决方式来源:https://stackoverflow.com/questions/25316591/angularjs-ui-router-state-reload-child-state-onl ...
- 6个强大的AngularJS扩展应用
本文链接:http://www.codeceo.com/article/6-angularjs-extension.html本文作者:码农网 – 小峰 AngularJS现在非常热门,是Google推 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(1)
介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...
- 通过angularjs的directive以及service来实现的列表页加载排序分页
前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...
- angularjs tips
angular-ui #1 .Impossible to disable fade in modal angularjs ui modal 去掉fade in效果: googleA googleB # ...
- 通过angularjs的directive以及service来实现的列表页加载排序分页(转)
前两篇:(列表页的动态条件搜索,我是如何做列表页的)分别介绍了我们是如何做后端业务系统数据展示类的列表页以及动态搜索的,那么还剩下最重要的一项:数据展示.数据展示一般包含三部分: 数据列头 数据行 分 ...
随机推荐
- node、mongodb、服务器相关
1.CentOs搭建NodeJs服务器-Mongodb安装 2.如何将 node+mongodb 项目部署在服务器上 3.如何通过cmd开一个本地服务器 4.如何部署一个本地的web项目到服务器-搭建 ...
- Codeforces 1281E
Link 题意:一棵$2n$个点的树让你分配$n$对居民在点上求每对居民之间路径和的最小值和最大值 思路:考虑一条边$(u, v)$ 1.若要使答案尽可能大,那么这条边应该取到尽可能多次.显然,如果$ ...
- 快速居中对齐 flex+margin auto
- sql server某列数据值逐行累加
sql语句示例: DECLARE @pts varchar(max)='[{"x":5.801718000000000e+002,"y":3.633722000 ...
- 7.Object
Object类 超类.基类,所以类的直接或间接父类,位于继承树的最顶层 任何类,如没有书写extends显示继承某个类,都默认直接继承Object类,否则为间接继承 Object类中所定义的方法,是所 ...
- centos安装Jenkins报错
[SKIPPED] jenkins-2.249.3-1.1.noarch.rpm: Already downloaded warning: /var/cache/dnf/jenkins-0919f06 ...
- echars中国地图
vue中使用echars做出中国地图 这里只是个小demo,根据流程操作可以实现基础的中国地图,样式等后面根据需要自己去调 1.下载中国地图 echars官网示例中,没有中国地图的json,需要自己去 ...
- 数据库链接失败错误ERROR com.alibaba.druid.pool.DruidDataSource - {dataSource-1} init error解决
用java -jar启动之后,只要一访问数据库就报错,错误信息如下: 文字如下: 2019-07-02 10:25:12.220 ---> [http-nio-8080-exec-1] ---& ...
- DFS略思维题做题记录
洛谷:P4399 [JSOI2008]Blue Mary的职员分配 链接 代码: #include<iostream> using namespace std; int n,x,y,z,A ...
- SQL时间函数学习
笔记来自如鹏网杨中科老师所著的 <程序员的SQL金典> 一.日期时间函数: 日期时间类型分为 日期.时间.日期时间.时间戳 日期:"年-月-日" 没有时间分秒 ...