<!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 = 0;//添加次数 $scope.regExp = { mobile:"/^(13|15|17|18|14)[0-9]{9}$/" } // 添加 $scope.addRow = function(){ $scope.jsonListAddNull = { name1: '', name2: '', name3: '' }; $scope.addNum = $scope.addNum + 1; if($scope.addNum <= 20){ $scope.jsonListAdd.push($scope.jsonListAddNull); } }; // 提交 $scope.submit = function(){ console.log($scope.jsonListAdd); }; });