angular的表单,点击确定进行创建,支持批量创建,表单验证有样式提醒;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.css">
<style>
fieldset{
border:1px solid black;
padding:10px;
position:relative;
}
</style>
<script src="./../node_modules/angular/angular.js"></script>
<script src="form.controller.js"></script>
<body ng-app="app">
<!-- 控制器 -->
<div class="row form-group" ng-controller="form" style="width:50%;margin:100px auto">
<!-- 表单 -->
<form name="myForm">
<!-- 点击添加策略 -->
<button class="btn btn-primary" style="display:block;margin:5px auto;width:80%" ng-click="addScale()">
<span class="fa fa-plus" ></span>添加策略
</button>
<p ng-show="data.type==‘1‘&&expand.length==0 || data.type==‘2‘&&narrow.length==0" style="color:#c82e29;text-align:center">相同策略只能创建一次</p>
<!-- 循环生成 -->
<fieldset class="margin-10" ng-repeat="x in rules">
<!-- 点击关闭当前块 -->
<span class="glyphicon glyphicon-remove" style="position:absolute;cursor:pointer;top:10px;right:10px;z-index:1" ng-click="reduce($index)"></span>
<!-- ng-class="{类名:bool,‘类名‘:bool2}" bool值表达式可以用{{}},myForm.inputName.$dirty是否修改,$valid验证是否通过; -->
<div class="col-md-5 margin-bottom-10" ng-class="{‘has-success‘:myForm.{{‘envs_name‘+$index}}.$valid,‘has-error‘:myForm.{{‘envs_name‘+$index}}.$invalid && myForm.{{‘envs_name‘+$index}}.$dirty}">
<label class="control-label">
<span class="symbol required"></span>请选择策略
</label><br>
<select class="form-control" style="width:100%" required name="{{‘envs_name‘+$index}}" ng-model="x.metric">
<option value="{{x}}" ng-repeat="x in expand">{{formatMetric(x)}}</option>
</select>
</div>
<div class="col-md-2" style="padding:0">
<div style="margin-top:30px" class="text-center">{{data.type =="1"?"大于或等于":"小于或等于"}}</div>
</div>
<div class="col-md-5 margin-bottom-15" ng-class="{‘has-success‘:myForm.{{‘envs_value‘+$index}}.$valid,‘has-error‘:myForm.{{‘envs_value‘+$index}}.$invalid && myForm.{{‘envs_value‘+$index}}.$dirty}">
<label class="control-label"><span class="symbol required"></span>百分比</label><br>
<input class="form-control" style="width:100%" step="0.1" required ng-pattern="/^\d+(\.\d+)+$/" max="100" type="number" name="{{‘envs_value‘+$index}}" ng-model="x.threshold_value" >
<span ng-show="myForm.{{‘envs_value‘+$index}}.$invalid && myForm.{{‘envs_value‘+$index}}.$dirty" style="color:#c82e29">请输入0-100的小数</span>
</div>
<div class="col-md-4 margin-bottom-10" ng-if="data.type ==1" ng-class="{‘has-success‘:myForm.{{‘envs_priority‘+$index}}.$valid,‘has-error‘:myForm.{{‘envs_priority‘+$index}}.$invalid && myForm.{{‘envs_priority‘+$index}}.$dirty}">
<label class="control-label">
<span class="symbol required"></span>优先级
<br>
</label>
<input class="form-control" style="width:100%" required type="number" name="{{‘envs_priority‘+$index}}" ng-model="x.priority">
</div>
<div class=" margin-bottom-10" ng-class="{‘col-md-4‘:data.type==1,‘col-md-6‘:data.type==2,‘has-success‘:myForm.{{‘envs_init‘+$index}}.$valid,‘has-error‘:myForm.{{‘envs_init‘+$index}}.$invalid && myForm.{{‘envs_init‘+$index}}.$dirty}">
<label class="control-label"><span class="symbol required"></span> 最{{data.type==1 ? "大":"小"}}容器数量</label><br>
<input style="width:100%" required type="number" min=‘1‘ name="{{‘envs_init‘+$index}}" ng-model="x.container_num">
<span ng-show="myForm.{{‘envs_init‘+$index}}.$invalid && myForm.{{‘envs_init‘+$index}}.$dirty" style="color:#c82e29">请输入不小于1的整数</span>
</div>
<div class=" margin-bottom-10" ng-class="{‘col-md-4‘:data.type==1,‘col-md-6‘:data.type==2,‘has-success‘:myForm.{{‘envs_step‘+$index}}.$valid,‘has-error‘:myForm.{{‘envs_step‘+$index}}.$invalid && myForm.{{‘envs_step‘+$index}}.$dirty}">
<label class="control-label"><span class="symbol required"></span> 每次扩缩容数量</label><br>
<input class="form-control" style="width:100%" min=‘1‘ required type="number" name="{{‘envs_step‘+$index}}" ng-model="x.step">
<span ng-show="myForm.{{‘envs_step‘+$index}}.$invalid && myForm.{{‘envs_step‘+$index}}.$dirty" style="color:#c82e29">请输入不小于1的整数</span>
</div>
</fieldset>
</form>
<button class="btn btn-primary btn-o pull-right" ng-click="ok(rules,myForm)">确定</button>
<button class="btn btn-primary btn-o pull-right" ng-click="cancel()">取消</button>
</div>
</body>
</html>
下面是js代码
var myModule = angular.module(‘app‘, []);
console.log(myModule);
myModule.controller("form",["$scope",function($scope){
//数据初始化
$scope.rules=[{}];
$scope.data={
type:1,
}
$scope.expand = [ "memory.usage.percent","cpu.usage.percent","thread.usage.number"]
//点击添加策略,增加表单块
$scope.addScale = function(){
$scope.rules.push({});
}
//点击X,删除当前块
$scope.reduce = function($index){
$scope.rules.splice($index,1);
if($scope.rules.length === 0){
$scope.addScale();
}
}
$scope.formatMetric = function(metric) {
switch (metric) {
case "memory.usage.percent":
return "内存平均值";
case "cpu.usage.percent":
return "CPU 平均值";
case "thread.usage.number":
return "JVM 线程数";
default:
return ""
}
};
//点击确定
$scope.ok = function(myForm){
if(myForm.$invalid){
return ;
}
//..
}
}])
最后效果:点击添加策略,会增加一块策略,右上角X点击关闭,当表单验证不通过时,显出红色,通过绿色,验证不通过点击确定不发送请求;
时间： 2024-08-23 18:47:37