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点击关闭,当表单验证不通过时,显出红色,通过绿色,验证不通过点击确定不发送请求;


												


											
angular表单的更多相关文章
	

    
						
  1. Angular 表单(二) - 模板驱动表单
		
    import { Component, OnInit } from '@angular/core'; import { Hero} from '../hero'; @Component({ selec ...
    
		
    2. 
						
  2. angular表单经验分享
		
    原文 https://www.jianshu.com/p/af359bd04f32 大纲 1.表单的名字不可以和传入的值的名字相同 2.在模板驱动表单的时候要使用angular表单的验证功能,需要将n ...
    
		
    3. 
						
  3. Angular 表单验证类库 ngx-validator 1.0 正式发布
		
    背景介绍 之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库  ngx-validator  ,由于这段时间一直在新模块做微前端以及相关业务组件库, ...
    
		
    4. 
						
  4. Angular表单 （一）表单简介
		
    Angular 表单 angular提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单.二者都从视图中捕获用户输入事件.验证用户输入.创建表单模型.修改数据模型,并提供跟踪这些更改的 ...
    
		
    5. 
						
  5. Angular表单验证
		
    novalidate   去掉html5自带的验证 ng-minlength    规定输入文本的最小长度 ng-maxlength    规定输入文本的最大长度 ng-submit  接收一个方法名 ...
    
		
    6. 
								
  6. 简单的angular表单验证指令
		
    <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title& ...
    
		
    7. 
						
  7. angular表单验证实例----可用的代码
		
    前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...
    
		
    8. 
						
  8. 从浅入深剖析angular表单验证
		
    最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...
    
		
    9. 
						
  9. angular 表单验证
		
    最近在用angular写表单验证时 , 不小心把ng-model全替换删掉了, 然后发现之前写的验证都失效, 在查阅资料和反复修改摸索后, 发现angular中的表单验证, 都是基于ng-model的 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. DB SQL Monitor 阻塞及等待事件监控工具
			
    SQL Monitor Designed By zhaoguan wang 说明------------------------------------------------------------ ...
    
			
    2. 
						
  2. [转]MySQL Connector/C++（一）
			
    http://www.cnblogs.com/dvwei/archive/2013/04/18/3029464.html#undefined#undefined MySQL Connector/C++ ...
    
			
    3. 
						
  3. [zhuan] linux 下 wxWidgets 安装，编译
			
      http://blog.csdn.net/yuzhenxiong0823/article/details/7727133 wxWidgets在Linux下有wxGTK和wxX11供使用,各需要GT ...
    
			
    4. 
						
  4. java同一个类不同方法间的同步
			
    对象的方法中一旦加入synchronized修饰,则任何时刻只能有一个线程访问synchronized修饰的方法.假设有个数据对象拥有写方法与读方法,多线程环境中要想保证数据的安全,需对该对象的读写方 ...
    
			
    5. 
						
  5. eclipse的常用快捷键
			
    Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加) Ctrl+Alt+↑ 复制当前行到上一行(复制增加) Alt+↓ 当前行和下面一行交互位置(特别实用,可以省去先剪切, ...
    
			
    6. 
						
  6. LeetCode "Design Twitter"
			
    A mix of hashmap, list and heap. struct Tw { Tw(long long pts, int tid) { ts = pts; tweetid = tid; } ...
    
			
    7. 
						
  7. Adobe 软件防止联网激活更改Hosts文件
			
    来自为知笔记(Wiz) 附件列表
    
			
    8. 
						
  8. 转贴：让Windows 2008 R2 64bit支持ASP.NET 1.1应用程序
			
    随着 Windows Server 2003 的支持期限到期, 最近有很多企业将目前很多的 Windows Server 2003 升级到 Windows 2008 R2. 之前有许多 Web App ...
    
			
    9. 
						
  9. 逐行读取txt文件，使用Linq与StreamReader的Readline方法
			
    List<string[]> list = File.ReadLines("YourFile.txt") .Select(r => r.TrimEnd('#')) ...
    
			
    10. 
						
  10. 【学】jQuery的源码思路6——增加each,animaion,ajax以及插件机制
			
    each() 插件机制 animation ajax //each() //这里第一个参数指定将this指向每次循环到的那个元素身上,而第三个参数element其实就是this本身所以和第一个参数是一 ...
    
			
    11.