<!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. 透彻讲解，Java线程的6种状态及切换

    Java中线程的状态分为6种. 1. 初始(NEW):新创建了一个线程对象,但还没有调用start()方法.2. 运行(RUNNABLE):Java线程中将就绪(ready)和运行中(running) ...

  2. 解决mysql插入数据报错[Err] 1146 - Table 'performance_schema.session_status' doesn't exist

    解决办法:1.打开cmd 执行命令cd/ 进入C盘根目录2.dir 查看C盘根目录下文件夹  找到 Program Files文件夹3.cd Program Files 进入该文件夹下 再输入dir ...

  3. Metasploit Framework（3）Meterpreter

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 Meterpreter:是一种高级的,动态的,可拓展的 ...

  4. navicat连接mysql报错1251的解决方法

    1.新安装的mysql8,使用破解版的navicat连接的时候一直报错,如图所示: 2.网上查找原因发现是mysql8 之前的版本中加密规则是mysql_native_password,而在mysql ...

  5. gcc编译参数详解一（-ffunction-sections -fdata-sections）

    背景 有时我们的程序会定义一些暂时使用不上的功能和函数,虽然我们不使用这些功能和函数,但它们往往会浪费我们的ROM和RAM的空间.这在使用静态库时,体现的更为严重.有时,我们只使用了静态库仅有的几个功 ...

  6. 转载 Flask中客户端 - 服务器 - web应用程序 是如何处理request生成response的?

    文章转载自https://blog.csdn.net/weixin_37923128/article/details/80992645 , 感谢原作者 当客户端向服务器发送一个请求时,服务器会将请求转 ...

  7. Go语言下的线程模型

    阅读Go并发编程对go语言线程模型的笔记,解释的非常到,好记性不如烂笔头,忘记的时候回来翻一番,在此做下笔记. Go语言的线程实现模型,又3个必知的核心元素,他们支撑起了这个线程实现模型的主要框架: ...

  8. Android数据保存之SharedPreference

    前言: 程序中处理的大部分问题都与数据有关,读取数据显示在UI上,读取的数据可以是本地的,也可以是网络的.保存用户数据到存储空间,可以是本地的数据库,文件等,也可以是保存到网络服务器.总之大部分的程序 ...

  9. 经典中的品味：第一章 C++的Hello，World！

    摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! "程序设计要通过编写程序的实践来学习"-Brian ...

  10. Nginx安装echo模块

    echo-nginx-module 模块可以在Nginx中用来输出一些信息,可以用来实现简单接口或者排错. 项目地址:https://github.com/openresty/echo-nginx-m ...