2016-07-22 83 views
0

我不是這個領域的專家,我只是想要學習這一點的實習生。角度表格張貼不工作

這裏是我的index.html:

<div> 
 
    <div id="grid1" ui-grid="gridOptions" ui-grid-pinning ui-grid-edit ui-grid-exporter ui-grid-selection class="grid"></div> 
 
    <div> 
 
    <form name="itemForm" ng-submit="addItem()"> 
 
     <br> 
 
     <fieldset> 
 
     <legend>New Proto:</legend> 
 
     <br> 
 
     ProtoID:<br> 
 
     <input ng-model="item.protoid"/><br> 
 
     <br> 
 
     Name:<br> 
 
     <input ng-model="item.name"/><br> 
 
     <br> 
 
     Model:<br> 
 
     <input ng-model="item.model"/><br> 
 
     <br> 
 
     HW:<br> 
 
     <input ng-model="item.hw"/><br> 
 
     <br> 
 
     RF Version:<br> 
 
     <input ng-model="item.rfversion"/><br> 
 
     <br> 
 
     WNC Version:<br> 
 
     <input ng-model="item.wncversion"/><br> 
 
     <br> 
 
     Serial:<br> 
 
     <input ng-model="item.serial"/><br> 
 
     <br> 
 
     IMEI1:<br> 
 
     <input ng-model="item.imei1"/><br> 
 
     <br> 
 
     IMEI2:<br> 
 
     <input ng-model="item.imei2"/><br> 
 
     <br> 
 
     Received:<br> 
 
     <input ng-model="item.received"/><br> 
 
     <br> 
 
     Returned:<br> 
 
     <input ng-model="item.returned"/><br> 
 
     <br> 
 
     Notes:<br> 
 
     <input ng-model="item.notes"/><br> 
 
     <br> 
 
     <!--SBands:<br> 
 
     <input type="text" ng-model="sbands"><br> 
 
     <br> 
 
     RefDev:<br> 
 
     <input type="text" ng-model="refdev"><br> 
 
     <br>--> 
 
     <input type="submit" value="Add"/> 
 
     <!--<input type="button" ng-click='addNewItem()' value="addNewItem"> 
 
     <input type="submit" ng-click='save()' value="Save">--> 
 
     </fieldset> 
 
    </form> 
 
    </div> 
 

 

 

 

 
</div>

,這裏是我的angularjs部分:

'use strict'; 
 

 
angular.module('OpenTMIControllers') 
 
    .controller('ResourcesController', ['$scope', 'Resource', '$stateParams', '$log', '$http', 
 
    function($scope, Resource, $stateParams, $log, $http) { 
 

 
     $log.info('init ResourcesController') 
 

 
     var updateTable = function(q) { 
 
     var q = q || {}; 
 
     Resource.query({ 
 
      q: JSON.stringify(q) 
 
     }, function(resources) { 
 
      console.log(resources); 
 
      $scope.dataResources = resources; 
 
     }); 
 
     } 
 
     $scope.columns = [{ 
 
      field: 'protoid', 
 
      width: 150, 
 
      enableCellEdit: false, 
 
      displayName: 'ProtoID', 
 
      visible: true 
 
     }, { 
 
      field: 'name', 
 
      width: 150, 
 
      enableCellEdit: false, 
 
      displayName: 'Name', 
 
      visible: true 
 
     }, { 
 
      field: 'model', 
 
      width: 150, 
 
      enableCellEdit: false, 
 
      displayName: 'Model', 
 
      visible: true 
 
     }, { 
 
      field: 'hw', 
 
      width: 100, 
 
      enableCellEdit: false, 
 
      displayName: 'HW', 
 
      visible: true 
 
     }, { 
 
      field: 'rfversion', 
 
      width: 100, 
 
      enableCellEdit: false, 
 
      displayName: 'RF', 
 
      visible: false 
 
     }, { 
 
      field: 'wncversion', 
 
      width: 100, 
 
      enableCellEdit: false, 
 
      displayName: 'WNC', 
 
      visible: false 
 
     }, { 
 
      field: 'serial', 
 
      width: 200, 
 
      enableCellEdit: false, 
 
      displayName: 'Serial', 
 
      visible: true 
 
     }, { 
 
      field: 'imei1', 
 
      width: 140, 
 
      enableCellEdit: false, 
 
      displayName: 'IMEI1', 
 
      visible: false 
 
     }, { 
 
      field: 'imei2', 
 
      width: 140, 
 
      enableCellEdit: false, 
 
      displayName: 'IMEI2', 
 
      visible: true 
 
     }, { 
 
      field: 'received', 
 
      width: 140, 
 
      enableCellEdit: false, 
 
      displayName: 'Received', 
 
      visible: true 
 
     }, { 
 
      field: 'returned', 
 
      width: 140, 
 
      enableCellEdit: false, 
 
      displayName: 'Returned', 
 
      visible: true 
 
     }, { 
 
      field: 'notes', 
 
      width: 200, 
 
      enableCellEdit: true, 
 
      displayName: 'Notes', 
 
      visible: true 
 
     }, { 
 
      field: 'sbands', 
 
      width: 150, 
 
      enableCellEdit: false, 
 
      displayName: 'Supported bands', 
 
      visible: false 
 
     }, { 
 
      field: 'refdev', 
 
      width: 200, 
 
      enableCellEdit: false, 
 
      displayName: 'Reference', 
 
      visible: false 
 
     }, 
 

 
     ] 
 

 
     $scope.gridOptions = { 
 
     columnDefs: $scope.columns, 
 
     enableColumnResizing: true, 
 
     enableFiltering: true, 
 
     //enableRowSelection: true, 
 
     enableFullRowSelection: true, 
 
     multiSelect: false, 
 
     showFooter: true, 
 
     exporterMenuCsv: true, 
 
     enableGridMenu: true, 
 
     data: 'dataResources', 
 
     onRegisterApi: function(gridApi) { 
 
      //set gridApi on scope 
 
      $scope.gridApi = gridApi; 
 
     } 
 
     } 
 

 
     $scope.item = { 
 
     protoid: '', 
 
     name: '', 
 
     model: '', 
 
     hw: '', 
 
     rfversion: '', 
 
     wncversion: '', 
 
     serial: '', 
 
     imei1: '', 
 
     imei2: '', 
 
     received: '', 
 
     returned: '', 
 
     notes: '', 
 
     }; 
 
     $scope.addItem = function() { 
 

 
     $scope.dataResources.push({ 
 

 
     }); 
 

 

 
     $http({ 
 
      method: 'POST', 
 
      url: '/api/v0/resources/:Resource.:format?', 
 
      data: $scope.item, 
 
      header: { 
 
       'Content-type': 'application/x-www-form-urlencoded' 
 
      } 
 
      }) 
 
      .success(function(data) { 
 

 
      }); 
 

 
     } 
 

 
     updateTable(); 
 
    } 
 
    ]);

此代碼應廣告d填寫表格中的所有數據併發布並保存,但是當我點擊提交按鈕時,它只會添加一個空白行而不保存。

+0

嘗試在addItem()函數console.log($ scope.item),看看你正在得到什麼? –

+0

也嘗試使用formdata類,它總是爲我工作 – henrybbosa

+0

嘗試添加一個'name'屬性到你的輸入像'name =「itemForm.protoID」' –

回答

0

試試這段代碼適用於我。還要確保html是在正確的控制器

$scope.item = { 
     protoid: '', 
     name: '', 
     model: '', 
     hw: '', 
     rfversion: '', 
     wncversion: '', 
     serial: '', 
     imei1: '', 
     imei2: '', 
     received: '', 
     returned: '', 
     notes: '', 
     }; 


       var form_data = new FormData(); 
       form_data.append("post_form","post_form"); 

       form_data.append("proto_id",$scope.item.protoid); 
       form_data.append("name",$scope.item.name); 
       form_data.append("model",$scope.item.model); 
       form_data.append("hw",$scope.item.hw); 
       form_data.append("rfversion",$scope.item.rfversion); 
       form_data.append("wncversion",$scope.item.wncversion); 
       form_data.append("serial",$scope.item.serial); 
       form_data.append("imei1",$scope.item.imei1); 
       form_data.append("imei2",$scope.item.imei2); 
       form_data.append("received",$scope.item.received); 
       form_data.append("returned",$scope.item.returned); 
       form_data.append("notes",$scope.item.notes); 


       $.ajax({ 
       url: "/api/v0/resources/:Resource.:format?", 
       type: "POST", 
       data: form_data, 
       processData: false, 
       contentType: false, 
       success: function(response) { 


       }, 
       error: function(jqXHR, textStatus, errorMessage) { 

       } 
       });