输入字段值未传递给控制器

时间：2014-10-09 15:51:32

标签： angularjs

我被困在这一段时间了。我有一个Job类，它有多个ChangeOrders和Purchase Orders。我可以毫无问题地创造一份新工作。我使用相同的代码发布新的CO和PO。问题是值没有绑定到那里的控制器。新作业和CO / PO之间的区别在于我使用$ rootScope和ngStorage将JobId插入到CO / PO模态中。

采购订单模式

//New PurchaseOrder Modal
$scope.NewPurchaseOrderModal = function () {
    var modalInstance = $modal.open({
        templateUrl: 'views/modals/NewPurchaseOrderModal.html',
        controller: 'NewPurchaseOrderModalInstanceCtrl',
        windowClass: 'large-Modal',
        resolve: {
            p: function () {
                return $scope.p;
            }
        }
    });
};

采购订单POST 

//Post New Purchase Orders
$scope.submitPO = function () {;
    $scope.job = {}; 
    alert($scope.PONumber);
    var data = {
        JobId: $scope.job.JobId,
        PONumber: $scope.PONumber,
        PODate: $scope.PODate,
        POAmount: $scope.POAmount,
        POLastPrintDate: $scope.POLastPrintDate,
        POEmail: $scope.POEmail,
        POPrint: $scope.POPrint,
        POFaxNumber: $scope.POFaxNumber,
        PONotes: $scope.PONotes,
        POCreatedBy: $scope.POCreatedBy,
        PODeliveryDate: $scope.PODeliveryDate,
        POShipVia: $scope.POShipVia,
        POShowPrices: $scope.POShowPrices,
        POCostCode: $scope.POCostCode,
        POApprovedNumber: $scope.POApprovedNumber,
        POBackorder: $scope.POBackorder,
       }
    $http.post('/api/apiPurchaseOrder/PostNewPurchaseOrder', data).success(function (data, status, headers) {
        console.log(data);
        $scope.cancelNewPurchaseOrderModal();

    });
  };
});

采购订单视图

 <div class="container" style="margin-top:20px" ng-controller="POCtrl">
   <form ng-submit="submitPO()" enctype="multipart/form-data">
    <fieldset>
        <tabset>
            <tab heading="Cover">
                <div class="col-xs-12" style="margin-top:10px">
                    <div class="inline-fields" style="" ng-show="true">
                        <label>JobId:</label>
                        <input style="width:150px;" ng-model="job.JobId" type="text" />
                    </div>
                    <div class="inline-fields">
                        <label></label>
                        <input style="width:150px;margin-left:81px" ng-model="job.JobName" type="text" />
                        <label style="margin-left:268px">Number:</label>
                        <input style="width:150px" ng-model="PONumber" type="text" />
                    </div>
                    <div class="inline-fields">
                        <label style="margin-left:48px">Attn:</label>
                        <input style="width:150px;" ng-model="ChangeOrderAttn" type="text" />
                        <label style="margin-left:291px">Date:</label>
                        <input style="width:150px" ng-model="PODate" type="date" />
                    </div>
                    <div class="inline-fields">
                        <label style="margin-left:39px">Email:</label>
                        <input style="width: 150px;" ng-model="POEmail" type="text" />
                        <label style="margin-left:217px">GC Ref Number:</label>
                        <input style="width:150px" ng-model="POApprovedNumber" type="text" />
                    </div>
                    <div class="inline-fields">
                        <label style="margin-left:52px">Fax:</label>
                        <input style="width: 150px; " ng-model="POFaxNumber" type="text" />
                        <label style="margin-left:233px">Delivery Date:</label>
                        <input style="width:150px" ng-model="PODeliveryDate" type="date" />
                    </div>
                    <div class="inline-fields">
                        <label style="margin-left: 438px">Approved Amount:</label>
                        <input style="width:150px" ng-model="ChangeOrderApprovedAmount" type="text" />
                    </div>
                </div><!--End col-xs-6-->
                <div class="col-xs-12">
                    <div class="inline-fields" style="margin-top:30px;margin-left:2px">
                        <label>Created By:</label>
                        <input style="width:635px" ng-model="POCreatedBy" type="text" />
                    </div>
                    <div class="inline-fields" style="margin-left:37px">
                        <label>Notes:</label>
                        <textarea style="width:635px;height:200px" ng-model="PONotes"></textarea>
                    </div>
                    <div class="inline-fields" style="margin-top:10px;margin-left:509px">
                        <label>Amount:</label>
                        <input style="width:150px" ng-model="POAmount" type="text" />
                    </div>
                </div>
                <div class="col-xs-12" style="margin-top:30px;padding-bottom:20px">
                    <input style="margin-left:435px;width:75px;margin-right:25px" ng-click="printEditChangeOrderModal()" type="button" value="Print" go-click="#" />&nbsp;
                    <input style="margin-right:25px;width:75px" type="submit" value="Save" go-click="#" />
                    <input style="width:75px" type="button" ng-click="cancelNewPurchaseOrderModal();" value="Exit" go-click="#" />
                </div><!--End col-xs-12-->
            </tab><!--End Cover Content-->
            <tab heading="Details">...</tab>
            <tab heading="Items">...</tab>
        </tabset><!--End Tab Content-->
    </fieldset><!--End Fieldset-->
</form>

在sessionStorage中设置JobId的功能

 //Sync Table Selections / sessionStorage
$scope.selectedJob = $sessionStorage.$default($scope.jobArray[1]);
$scope.selectJob = function (job) {
    $rootScope.job = job;
    angular.extend($scope.selectedJob, job);
    console.log($rootScope.job);
};
$scope.clearSelectedJob = function () {
    $sessionStorage.$reset();
};

表格，用于选择在存储

中设置的作业 
 <div id="scrollArea" style="margin-top:40px" ng-controller="JobCtrl">
                  <table class=" table table-striped table-hover">
                      <thead> <tr><th>No</th><th>Name</th></tr></thead>
                      <tbody>
                          <tr ng-repeat="job in jobArray" class="pointer no_selection" ng-class="{highlight: job.JobNumber===selectedJob.JobNumber}">
                              <td ng-dblclick="EditJobModal(job.JobId)" ng-click="selectJob(job)">{{job.JobNumber}}</td>
                              <td ng-dblclick="EditJobModal(job.JobId)" ng-click="selectJob(job)">{{job.JobName}}</td>
                          </tr>
                      </tbody>
                  </table>
              </div><!--End Job Table-->

PO控制器

'use strict';
app.controller('POCtrl', function ($scope, $rootScope, $resource, $http, $filter,
   $q, $modal, PO, POGet, POFactory, notificationFactory) {

//New PurchaseOrder Modal
$scope.NewPurchaseOrderModal = function () {
    var modalInstance = $modal.open({
        templateUrl: 'views/modals/NewPurchaseOrderModal.html',
        controller: 'NewPurchaseOrderModalInstanceCtrl',
        windowClass: 'large-Modal',
        resolve: {
            p: function () {
                return $scope.p;
            }
        }
    });
};
//Edit PurchaseOrder Modal
$scope.EditPurchaseOrderModal = function (id) {
    $.get('/api/apiPurchaseOrder/' + id, function (data) {
        $scope.items = data;
        var modalInstance = $modal.open({
            templateUrl: 'views/modals/EditPurchaseOrderModal.html',
            controller: 'EditPurchaseOrderModalInstanceCtrl',
            windowClass: 'large-Modal',
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });
    });

};
//GET PurchaseOrders
 POGet.query().then(function (data) {
    $scope.poArray = data;
         }, function (reason) {
             errorMngrSvc.handleError(reason);
});


//Post New Purchase Orders
$scope.submitPO = function () {;
    $http.post('/api/apiPurchaseOrder/PostNewPurchaseOrder', $scope.data).success(function (data, status, headers) {
        $scope.cancelNewPurchaseOrderModal();

    });
};
//$scope.submitPO = function () {;
//    $scope.job = {};
//    alert($scope.PONumber);
//    var data = {
//        JobId: $scope.job.JobId,
//        PONumber: $scope.PONumber,
//        PODate: $scope.PODate,
//        POAmount: $scope.POAmount,
//        POLastPrintDate: $scope.POLastPrintDate,
//        POEmail: $scope.POEmail,
//        POPrint: $scope.POPrint,
//        POFaxNumber: $scope.POFaxNumber,
//        PONotes: $scope.PONotes,
//        POCreatedBy: $scope.POCreatedBy,
//        PODeliveryDate: $scope.PODeliveryDate,
//        POShipVia: $scope.POShipVia,
//        POShowPrices: $scope.POShowPrices,
//        POCostCode: $scope.POCostCode,
//        POApprovedNumber: $scope.POApprovedNumber,
//        POBackorder: $scope.POBackorder,
//       }
//    $http.post('/api/apiPurchaseOrder/PostNewPurchaseOrder', data).success(function (data, status, headers) {
//        console.log(data);
//        $scope.cancelNewPurchaseOrderModal();

//    });
//};
});//End POCtrl
app.controller('NewPurchaseOrderModalInstanceCtrl', function ($scope, $modalInstance) {

$scope.cancelNewPurchaseOrderModal = function () {
    $modalInstance.dismiss('cancel');
};
});
 app.controller('EditPurchaseOrderModalInstanceCtrl', function ($scope, $modalInstance, items) {

$scope.items = items;

$scope.cancelEditPurchaseOrderModal = function () {
    $modalInstance.dismiss('cancel');
};
});

工作控制器

'use strict';
 app.controller('JobCtrl', function ($scope, $rootScope, $resource, $route, $http, $filter,
  $q, $modal, $sessionStorage, Job, JobGet, jobFactory, notificationFactory) {


//New Job Modal
$scope.NewJobModal = function () {

    var modalInstance = $modal.open({
        templateUrl: 'views/modals/NewJobModal.html',
        controller: 'NewJobModalInstanceCtrl',
        windowClass: 'large-Modal',
        resolve: {
            p: function () {
                return $scope.p;
            }
        }
    });
};

$scope.EditJobModal = function (id) {
    $.get('/api/apiJob/' + id, function (data) {
        $scope.items = data;
        var modalInstance = $modal.open({
            templateUrl: 'views/modals/EditJobModal.html',
            controller: 'EditJobModalInstanceCtrl',
            windowClass: 'large-Modal',
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });
    });

};

//GET Jobs

$scope.jobArray = {};
JobGet.query().then(function (data) {
    $scope.jobArray = data;
 }, function (reason) {
    errorMngrSvc.handleError(reason);
 });
 //Post New Job
 $scope.submitJob = function () {
    var data = {
        GeoAreaId: $scope.newItems.GeoAreaId,
        JobTypeId: $scope.newItems.JobTypeId,
        JobClassId: $scope.newItems.JobClassId,
        CustomerId: $scope.newItems.CustomerId,
        JobId: $scope.newItems.JobId,
        JobNumber: $scope.newItems.JobNumber,
        JobName: $scope.newItems.JobName,
        JobDescription: $scope.newItems.JobDescription,
        JobOriginalContract: $scope.newItems.JobOriginalContract,
        JobBillingDate: $scope.newItems.JobBillingDate,
        JobTotalCO: $scope.newItems.JobTotalCO,
        JobRevisedContract: $scope.newItems.JobRevisedContract,



    }
    $http.post('/api/apiJob/PostNewJob', data).success(function (data, status, headers) {
        console.log(data);
         $scope.cancelNewJobModal();
             $scope.$evalAsync(function () {
                 $scope.data;
        });
    });
};

//Update Job 
$scope.updateJob = function (job) {
    jobFactory.updateJob(job).success(successCallback)
        .error(errorCallback);
         console.log(job);
             $scope.cancelEditJobModal();
                 $scope.$evalAsync(function () {
                     $scope.job;
                 });
 };
var successCallback = function (job, status, headers, config) {
    notificationFactory.success();
};
var errorCallback = function (job, status, headers, config) {
    notificationFactory.error(job.ExceptionMessage);
};


//Sync Table Selections / sessionStorage
$scope.selectedJob = $sessionStorage.$default($scope.jobArray[1]);
$scope.selectJob = function (job) {
    $rootScope.job = job;
    angular.extend($scope.selectedJob, job);
    console.log($rootScope.job);
};
$scope.clearSelectedJob = function () {
    $sessionStorage.$reset();
};

$scope.newItems = {};
//Typeahead New Job Customer select

$scope.selectNewCustomer = function (customer) {

    $scope.newItems.CustomerId = customer.CustomerId;
    $scope.newItems.Customer.CustomerName = customer.CustomerName;
    $scope.newItems.Customer.CustomerAddress = customer.CustomerAddress;
    $scope.newItems.Customer.CustomerCity = customer.CustomerCity;
    $scope.newItems.Customer.CustomerState = customer.CustomerState;
    $scope.newItems.Customer.CustomerZipcode = customer.CustomerZipcode;
    $scope.newItems.Customer.CustomerPhoneNumber = customer.CustomerPhoneNumber;
    $scope.newItems.Customer.CustomerFaxNumber = customer.CustomerFaxNumber;
    $scope.newItems.Customer.CustomerWebsite = customer.CustomerWebsite;
    $scope.newItems.Customer.CustomerOtherShit = customer.CustomerOtherShit;

    $scope.newItems.Customer.CustomerHidden = customer.CustomerHidden;
    $scope.newItems.Customer.CustomerPM = customer.CustomerPM;
    $scope.newItems.Customer.CustomerAdmin = customer.CustomerAdmin;
    $scope.newItems.Customer.CustomerAccountant = customer.CustomerAccountant;
};



 });//End Job Controller

app.controller('NewJobModalInstanceCtrl', function ($scope, $modalInstance) {

$scope.cancelNewJobModal = function () {
    $modalInstance.dismiss('cancel');
};
});
 app.controller('EditJobModalInstanceCtrl', function ($scope, $modalInstance, items) {

$scope.items = items;

$scope.cancelEditJobModal = function () {
    $modalInstance.dismiss('cancel');
};
});

1 个答案:

答案 0 :(得分：1)

我更改为在单个模型中处理所有内容更容易：

$scope.submitPO = function () {
    $scope.data.jobId = $rootscope.job.id; //make sense?
    $http.post('/api/apiPurchaseOrder/PostNewPurchaseOrder', $scope.data).success(function (data, status, headers) {
        $scope.cancelNewPurchaseOrderModal();

    });
};

观点：

<div class="inline-fields" style="" ng-show="true">
    <label>JobId:</label>
    <input style="width:150px;" ng-model="data.job.JobId" type="text" />
</div>
  

..... 

 <div class="inline-fields">
     <label style="margin-left:48px">Attn:</label>
     <input style="width:150px;" ng-model="data.ChangeOrderAttn" type="text" />
     <label style="margin-left:291px">Date:</label>
     <input style="width:150px" ng-model="data.PODate" type="date" />
 </div>

并删除此$ scope.job = {};从您的提交功能，看起来您正在重置＆＃39;作业到一个空对象

相关问题
最新问题