2015-11-30 2 views
3

У меня есть требование, когда у меня есть таблица с (8 * 6) 48 ячейками, у всех есть входной тег внутри <td>, при отправке этой таблицы файл js должен принимать все данные и отправлять их по почте мой внутренний контроллер. Моя проблема связана с тем, что все ячейки являются введенными типами текста, угловые не могут принимать значения внутри него.Угловая таблица отправки с данными

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="[email protected]" 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"> 

Мне нужно запросить значение .. нужна ваша помощь в этом

+0

результат я получаю <входной тип = "текст" ID =» row-32-position "name =" row-32-position "value =" Developer "> –

ответ

1

Вместо:

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()); 
} 
+0

Возьми мой салют ... и вперед! –

1

То, что я понял из вашего описания.

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="[email protected]" 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

Смежные вопросы