AngularJS UI
2024-10-21 15:40:57
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>
最新文章
- 说说我的企业级应用上线历程(A little different!)
- 如何让两个 并列的div高度相等
- hive操作语句使用详解
- 清理IOS项目未使用图片脚本
- Oracle 插入数据效率对比
- vs2008工程配置
- sort()方法理解
- 队列Queue FIFO先进先出 栈Stack FILO先进后出
- 解决项目中找不到Maven Dependencies
- margin负值的相关应用
- VisualStudio程序运行后控制台窗口一闪就没了
- BZOJ 3744: Gty的妹子序列 [分块]
- EF架构~migration对mysql数据库的迁移
- Django(十五)Form组件
- [Vijos1130][NOIP2001]数的计数 (递推)
- Android动画之逐帧动画(FrameAnimation)详解
- javascript中的高阶函数, 和 类定义Function, 和apply的使用
- java面试题:分布式
- jQuery简单效果
- 使用Camera进行拍照 &; 后台静默拍照的思路