Angular正在提交包含数据的表

Angular Submitting table with data

本文关键字：数据 包含 提交 Angular      更新时间：2023-09-26

我有一个要求，我有一张包含（8*6）48个单元格的表，所有单元格都在<td>中有输入标记，在提交该表时，我的js文件必须获取所有数据并将其POST到我的后端控制器。我的问题是，由于所有单元格都是输入文本类型，angular无法获取其中的值

var isrcorderapp = angular.module('plunker', []);
/*
isrcorderapp.directive("test1", function(){
  return {
    restrict:'A',
    link: function($scope, $elem) {
      var arr = ($($elem[0]).find('tbody tr'));
      var coll = [];
      for(var i=0; i < arr.length; i++){
        var tr = arr[i];
        var tdColl = $(tr).find('td');
        var obj = [];
        for(var y = 0; y < tdColl.length; y++ ){
          
          obj.push(tdColl[y].innerHTML);
        }
        coll.push(obj)
      }
     console.log(coll);
    }
    }
  });
*/
isrcorderapp.controller("isrcorders", function($scope,$http,$compile) {
    $scope.myVal='submit';
    $scope.coll={};
    $scope.myFn=function(){
     
     var total=angular.element( document.querySelector( '.table' ) ).find('tbody tr');
          var coll = [];
        console.log('totla'+total);
         for(var i=0; i < total.length; i++){
          console.log('totla'+total);
           var tr = total[i];
             var tdColl = $(tr).find('td');
             console.log(tdColl);
                var obj = [];
                for(var y = 0; y < tdColl.length; y++ ){
                  obj.push(tdColl[y].innerHTML);
                }
                coll.push(obj);
             console.log(coll);
         }
    }
    
});
<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js" ></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="isrcorders">
      <form ng-submit="myFn()">
    <table test1="" id="isrctable" class="table"  >
     <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td><input type="text" id="row-1-age" name="row-1-age" value="61"></td>
                <td><input type="text" id="row-1-position" name="row-1-position" value="System Architect"></td>
                <td><select size="1" id="row-1-office" name="row-1-office">
                    <option value="Edinburgh" selected="selected">
                        Edinburgh
                    </option>
                    <option value="London">
                        London
                    </option>
                    <option value="New York">
                        New York
                    </option>
                    <option value="San Francisco">
                        San Francisco
                    </option>
                    <option value="Tokyo">
                        Tokyo
                    </option>
                </select></td>
            </tr>
           </tbody>
       
        
    </table>
           <input type="submit" id="submit" value={{myVal}} />
          </form>
  </body>
</html>

当我尝试使用innerHTML属性进行查询时，我得到了完整的HTML标记，如

<input type="text" id="row-32-position" name="row-32-position" value="Developer">

我需要查询值。。需要您对此的帮助

代替：

obj.push(tdColl[y].innerHTML);

尝试：

var td = tdColl.eq(y);
var input = td.find('input,select');
if (input.length) {
    obj.push(input.val());
} else {
    obj.push(td.text());
}

我从你的描述中了解到了什么。

HTML:

<!DOCTYPE html>
<html ng-app="plunker">
<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>
    document.write('<base href="' + document.location + '" />');
    </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="isrcorders">
    <form ng-submit="myFn()">
        <table test1="" id="isrctable" class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Position</th>
                    <th>Office</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Position</th>
                    <th>Office</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>
                        <input type="text" ng-model="table.rowone.age">
                    </td>
                    <td>
                        <input type="text" ng-model="table.rowone.position">
                    </td>
                    <td>
                        <select ng-model="table.rowone.office">
                            <option value="Edinburgh">
                                Edinburgh
                            </option>
                            <option value="London">
                                London
                            </option>
                            <option value="New York">
                                New York
                            </option>
                            <option value="San Francisco">
                                San Francisco
                            </option>
                            <option value="Tokyo">
                                Tokyo
                            </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>yoyo baby</td>
                    <td>
                        <input type="text" ng-model="table.rowtwo.age">
                    </td>
                    <td>
                        <input type="text" ng-model="table.rowtwo.position">
                    </td>
                    <td>
                        <select ng-model="table.rowtwo.office">
                            <option value="Edinburgh">
                                Edinburgh
                            </option>
                            <option value="London">
                                London
                            </option>
                            <option value="New York">
                                New York
                            </option>
                            <option value="San Francisco">
                                San Francisco
                            </option>
                            <option value="Tokyo">
                                Tokyo
                            </option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
        <button ng-click="submitTable(table)">Submit</button>
    </form>
    <pre>{{tableval | json}}</pre>
</body>
</html>

角度代码：

var app = angular.module('plunker', []);
app.controller('isrcorders', function($scope) {
    $scope.submitTable = function(tablevalues) {
        // $http.post('/url', tablevalues)
        //     .success(function(data, status) {
        //     })
        //     .error(function(data, status) {
        //     });
        $scope.tableval = tablevalues;
        console.log(tablevalues);
    }
});

PLnkr：http://plnkr.co/edit/VCKrwe4pTjVdQiqzWpVn?p=preview

相关文章：