<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

<style>

    .hasError{

        border: 1px red solid;

    }

    .errorMsg{

        color: red

    }

</style>

<body ng-app="myApp" ng-controller="myCtrl">

    <button ng-click="addRow()">添加</button>

    <form name="userForm" novalidate  ng-submit="userForm.$valid?submit():''">

        <table>

            <thead>

                 <tr>

                    <th>字段一</th>

                    <th>字段二</th>

                    <th>字段三</th>

                </tr>

            </thead>

            <tbody>

                <tr ng-repeat="item in jsonList">

                    <td>

                        <input type="text" readonly ng-model="item.name1">

                    </td>

                    <td>

                        <input type="text" readonly ng-model="item.name2">

                    </td>

                    <td>

                        <input type="text" readonly ng-model="item.name3">

                    </td>

                </tr>

                <tr ng-repeat="item in jsonListAdd">

                    <td>

                        <ng-form name="tel{{$index}}">

                            <input

                            type="text"

                            placeholder="请输入手机号"

                            ng-model="item.name1"

                            required

                            ng-pattern = "/^(13|15|17|18|14)[0-9]{9}$/"

                            name="tel"

                            ng-class="{ 'hasError' : {{'tel' + $index}}.tel.$dirty && {{'tel' + $index}}.tel.$invalid}"

                            >

                            <p ng-show="{{'tel' + $index}}.tel.$dirty && {{'tel' + $index}}.tel.$invalid" class="errorMsg">error message1.</p>

                            <!-- <p>dirty: <span ng-bind="{{'tel' + $index}}.tel.$dirty"></span>    </p>

                            <p>invalid: <span ng-bind="{{'tel' + $index}}.tel.$invalid"></span></p> -->

                        </form>

                    </td>

                    <td>

                        <ng-form name="email{{$index}}">

                            <input type="text"

                            type="text"

                            placeholder="请输入6位验证码"

                            ng-model="item.name2"

                            required

                            ng-pattern = "/^[^\u2E80-\u9FFF]{6,16}$/"

                            name="email"

                            ng-class="{ 'hasError' : {{'email' + $index}}.email.$dirty && {{'email' + $index}}.email.$invalid}"

                            >

                            <p ng-show="{{'email' + $index}}.email.$dirty && {{'email' + $index}}.email.$invalid" class="errorMsg">error message2.</p>

                        </form>

                    </td>

                    <td>

                        <ng-form name="addr{{$index}}">

                            <input type="text"

                            type="text"

                            placeholder="请输入6位验证码"

                            ng-model="item.name3"

                            required

                            ng-pattern = "/^[^\u2E80-\u9FFF]{6,16}$/"

                            name="addr"

                            ng-class="{ 'hasError' : {{'addr' + $index}}.addr.$dirty && {{'addr' + $index}}.addr.$invalid}"

                            >

                            <p ng-show="{{'addr' + $index}}.addr.$dirty && {{'addr' + $index}}.addr.$invalid" class="errorMsg">error message3.</p>

                        </form>

                    </td>

                </tr>

            </tbody>

        </table>

        <button type="submit">提交</button>

    </form>

</body>

    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <!--<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>-->

     <script src="angular.js"></script>

    <script src="three.js"></script>

</html>

js:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.jsonList = [

            {

                name1: 'name1',

                name2: 'name2',

                name3: 'name3'

            },

            {

                name1: 'name1',

                name2: 'name2',

                name3: 'name3'

            },

            {

                name1: 'name1',

                name2: 'name2',

                name3: 'name3'

            }

        ];//原先的数据

    $scope.jsonListAdd = [];//添加的数据

    $scope.addNum = ;//添加次数

    $scope.regExp = {

        mobile:"/^(13|15|17|18|14)[0-9]{9}$/"

    }

    // 添加

    $scope.addRow = function(){

        $scope.jsonListAddNull = {

            name1: '',

            name2: '',

            name3: ''

        };

        $scope.addNum = $scope.addNum + ;

        if($scope.addNum <= ){

            $scope.jsonListAdd.push($scope.jsonListAddNull);

        }

    };

    // 提交

    $scope.submit = function(){

        console.log($scope.jsonListAdd);

    };

});

angular 1.2.29版本下 动态添加多个表单、 校验全部、 提交 、ng-form方案的更多相关文章

  1. IE低版本下实现html5的placeholder(表单提示)功能

    placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...

  2. v-if案例解析（element-ui form-item 结合 v-if 动态生成rule规则\表单元素，表单无法验证问题剖析 ）

    fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...

  3. IE下object元素遮挡div表单

    目前遇到这样的一个问题: 我用ActiveX插件做了一个C#的播放器,要将这个插件放到web浏览器中,然后可以通过前台页面来控制视频的播放,暂停还有回放,这个时候发现object的onclick事件无 ...

  4. Express下使用formidable实现POST表单上传文件并保存

    Express下使用formidable实现POST表单上传文件并保存 在上一篇文章中使用formidable实现了上传文件,但没将它保存下来. 一开始,我也以为是只得到了文件的相关信息,需要用fs. ...

  5. Element-ui中为上传组件添加表单校验

    vue所依赖的Element的UI库在使用其中的upload组件时,可能很大几率会遇到这个题,需要给upload组件添加表单校验 大家这里直接看代码就可以 <el-form-item class ...

  6. struts之动态方法调用改变表单action属性

      一.动态方法调用(DMI:Dynamic Method Invocation) ⒈struts2中同样提供了这个包含多个逻辑业处理的Action,这样就可以在一个Action中进行多个业务逻辑处理 ...

  7. MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求

    假如有一个数据表格UserInfo: public class UserInfo { public int Id { get; set; } public string Name { get; set ...

  8. JavaWeb -- Struts1 动态bean, 动态校验， 动态生成javascript 表单校验

    1. 动态formbean. 表单 JSP: <%@ page language="java" import="java.util.*" pageEnco ...

  9. 点击含下拉菜单的列表/表单按钮：通过JS创建虚拟按钮并点击

    ${JsCode} | Get Element Attribute | XPATH=//table[@class='mnubar']//tr//td//span[text()='${MenuArr[0 ...

随机推荐

  1. Easyui学习整理笔记

    目录 (1) 表格双击事件 (2) treegrid传参更新 (3) 设置列表checkbox单选 (4) Easyui实现单行选择和取消选择 @ 对工作中遇到的easyui做一下笔记,不定时更新 ( ...

  2. 人生苦短,我用Python(1)

    一.人生苦短,我用Python 在文章的开头给大家介绍一下Python语言,作者Guido von Rossum.对,就是图中的“人生苦短我用Python”那哥们.你可能以为我会用很多文字介绍Pyth ...

  3. Linux编程 23 shell编程(结构化条件判断 命令if -then ， if-then ... elif-then ...else，if test)

    一.概述 在上一篇里讲到了shell脚本,shell按照命令在脚本中出现的顺序依次进行处理,对于顺序操作已经足够了,但许多程序要求对shell脚本中的命令加入一些逻辑流程控制,这样的命令通常叫做 结构 ...

  4. WebAssembly是解决JavaScript 痼疾的银弹？

    写在前面 <没有银弹>是 Fred Brooks 在 1987 年所发表的一篇关于软件工程的经典论文.该论文的主要论点是,没有任何一项技术或方法可以能让软件工程的生产力在十年内提高十倍. ...

  5. MySQL索引的概念

    索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针.更通俗的说,数据库索引好比是一本书前面的目录,能加快数据库的查询速度. 索引分为聚簇索 ...

  6. Win32之隐藏DLL隐藏模块技术

    Win32之隐藏DLL隐藏模块技术 这一讲涉及到windows底层技术.跟汇编内容. 我们才可以实现模块隐藏(也称为DLL隐藏) 一丶API反汇编勾引兴趣 我们都用过Windows的进程跟线程API  ...

  7. Gradle nexus 解决开发机器不连网无法下载gradle插件问题

    在用gradle时常规配置如下(D:\gradle-4.9\init.d\init.gradle文件,没有这个文件时自建): ext { nexus = 'http://192.168.127.128 ...

  8. Canal 源码走读

    前言 canal 是什么? 引用一下官方回答: 阿里巴巴mysql数据库binlog的增量订阅&消费组件 canal 能做什么? 基于日志增量订阅&消费支持的业务: 数据库镜像 数据库 ...

  9. Go基础系列：空接口

    空接口 空接口是指没有定义任何接口方法的接口.没有定义任何接口方法,意味着Go中的任意对象都可以实现空接口(因为没方法需要实现),任意对象都可以保存到空接口实例变量中. 空接口的定义方式: type ...

  10. 解读经典《C#高级编程》第七版 Page38-45.核心C#.Chapter2

    前言 控制流是语言中最基础的部分,我们不谈具体的细节,只讲讲一些关键和有趣的点. 01 流控制 条件语句:if, else if, else if语句的使用非常值得细讲,如何是好的使用习惯.有一点非常 ...