<!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. Python学习笔记【第九篇】：Python面向对象基础

    Python语言中一切皆对象(类.属性.方法.........) 概念 面向对象编程:Object Oriented Programming 简称OOP 面向对象程序设计 面向对象和面向过程都是解决问 ...

  2. document.getElementById 和 document.getElementsByClassName获取DOM元素的区别

    想必小伙伴们对于 JS 获取DOM的几种方法早已烂熟于心,了然于胸,   尤其是 document.getElementById 和 document.getElementsByClassName, ...

  3. SVG之颜色、渐变和笔刷的使用

    一.颜色 我们之前使用英文来表示颜色并进行填充,比如: <circle cx="800" cy="120" r="110" strok ...

  4. linux上安装jdk环境

    只在于安装jdk1.6.jdk1.7和jdk1.8,其他版本请绕行,目的在于方便自己和大家以后急于做jdk环境,苦于没有jdk安装包和设置变量的过程,我将安装包均放在云盘中, 需要直接在连接中找即可: ...

  5. GDB dump mem example和命令

    使用方法: You can use the commands dump, append, and restore to copy data between target memory and a fi ...

  6. Ubuntu 16.04下GDB调试

    在linux中还有一个更受大家欢迎的调试工具:GDB.GDB是一个由GNU开源组织发布的.UNIX/LINUX操作系统下的.基于命令行的.功能强大的程序调试工具.可以用来调试C,C++程序. GDB功 ...

  7. Python中高级变量类型（列表，元组，字典，字符串，公共方法...）

    高级变量类型 目标 列表 元组 字典 字符串 公共方法 变量高级 知识点回顾 Python 中数据类型可以分为 数字型 和 非数字型 数字型 整型 (int) 浮点型(float) 布尔型(bool) ...

  8. 用Python爬取"王者农药"英雄皮肤

    0.引言 作为一款现象级游戏,王者荣耀,想必大家都玩过或听过,游戏里中各式各样的英雄,每款皮肤都非常精美,用做电脑壁纸再合适不过了.本篇就来教大家如何使用Python来爬取这些精美的英雄皮肤. 1.环 ...

  9. deque源码4(deque元素操作:pop_back、pop_front、clear、erase、insert）

    deque源码1(deque概述.deque中的控制器) deque源码2(deque迭代器.deque的数据结构) deque源码3(deque的构造与内存.ctor.push_back.push_ ...

  10. spring-boot(八) springboot整合shiro-登录认证和权限管理

    学习文章:springboot(十四):springboot整合shiro-登录认证和权限管理 Apache Shiro What is Apache Shiro? Apache Shiro是一个功能 ...