Angularjs 角度Ui选项卡内的输入字段未过帐到DB
我有一个角度模态，它有角度UI选项卡。选项卡外的输入字段显示良好，选项卡内的输入字段显示不正确。但是，我对PUT使用相同的模式，并且该模式使用新数据更新DB。这是一个范围问题吗Angularjs 角度Ui选项卡内的输入字段未过帐到DB,angularjs,Angularjs,我有一个角度模态，它有角度UI选项卡。选项卡外的输入字段显示良好，选项卡内的输入字段显示不正确。但是，我对PUT使用相同的模式，并且该模式使用新数据更新DB。这是一个范围问题吗 <fieldset> <div class="col-xs-12"> @*<label style="">Hide: </label>
<fieldset>
<div class="col-xs-12">
@*<label style="">Hide: </label>
<input style="" ng-model="currentItem.JobHidden" type="checkbox">*@
<div class="inline-fields">
<h4 style="margin-left:24px">Job Info Customer Info</h4>
<label style="margin-left:23px">Number:</label>
<input style="width:100px" ng-model="JobNumber" type="text">
<label style="margin-left:115px">Customer:</label>
<input style="width:150px" type="text" ng-model="CustomerName"
typeahead="customer.CustomerName for customer in customerArray | filter:$viewValue"
placeholder="Enter Customer" typeahead-on-select="selectNewCustomer($item)">
</div>
<div class="inline-fields">
<label style="margin-left:33px">Status:</label>
<select style="width: 100px" ng-model="JobStatus">
<option disabled>Select</option>
<option value="Active">Active</option>
<option value="InActive">InActive</option>
<option value="Complete">Complete</option>
</select>
<label style="margin-left:125px">Address:</label>
<input style="width:200px" ng-model="CustomerAddress" type="text">
</div>
<div class="inline-fields">
<label style="margin-left:38px">Name:</label>
<input style="width:150px" ng-model="JobName" type="text">
<label style="margin-left:104px">City:</label>
<input style="width: 66px" ng-model="CustomerCity" type="text">
<label>St:</label>
<input style="width: 30px" ng-model="CustomerState" type="text">
<label>Zip:</label>
<input style="width: 44px" ng-model="CustomerZipcode" type="text">
</div>
<div class="inline-fields">
<label style="margin-left:20px">Address:</label>
<input style="width:185px" ng-model="JobAddress" type="text">
<label style="margin-left:78px">Ph:</label>
<input style="width: 100px; " ng-model="CustomerPhoneNumber" type="text">
<label style="margin-left:0px">Fax:</label>
<input style="width: 89px" ng-model="CustomerFaxNumber" type="text">
</div>
<div class="inline-fields">
<label style="margin-left:49px">City:</label>
<input style="width:66px" ng-model="JobCity" type="text">
<label>St:</label>
<input style="width:30px" ng-model="JobState" type="text">
<label>Zip:</label>
<input style="width:44px" ng-model="JobZipcode" type="text">
</div>
<div class="inline-fields">
<label style="margin-left:58px">Ph:</label>
<input style="width:100px" ng-model="JobPhoneNumber" type="text">
<label>Fax:</label>
<input style="width:89px" ng-model="JobFaxNumber" type="text">
</div>
<div class="inline-fields">
<label style="margin-left:55px">PM:</label>
<select style="width:138px" ng-options="employee.EmployeeFirstName + ' ' + employee.EmployeeLastName as employee.EmployeeFirstName + ' ' + employee.EmployeeLastName for employee in employeeArray | filter:{EmployeeIsPM : true}" ng-model="JobTESPM">
<option value="" disabled>Select</option>
</select>
</div>
</div>
</fieldset><br />
<!--Cover Content-->
<tabset>
<tab heading="Contract">
<div class="col-xs-12" style="margin-top:10px">
<div class="inline-fields">
<label style="margin-left:13px">Original Contract:</label>
<input style="width:115px" ng-model="JobOriginalContract" type="text" format="number">
<label style="margin-left:57px">Geo Area:</label>
<select style="width: 115px" ng-model="JobGeoArea">
<option disabled>Select</option>
<option value="JobGeoArea-1">JobGeoArea-1</option>
<option value="JobGeoArea-2">JobGeoArea-2</option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:69px">Total CO:</label>
<input style="width:115px" ng-model="JobTotalCO" type="text" format="number">
<label style="margin-left:82px">Job Class:</label>
<select style="width: 115px; " ng-model="JobClass">
<option disabled>Select</option>
<option value="JobClass-1">JobClass-1</option>
<option value="JobClass-2">JobClass-2</option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:11px">Revised Contract:</label>
<input style="width:115px" ng-model="JobRevisedContract" type="text" format="number">
<label style="margin-left:55px">Min Wage:</label>
<select style="width:90px" ng-model="JobMinWage">
<option disabled>Select</option>
<option value="1000">$1000</option>
<option value="2000">$2000</option>
</select>
<label style="margin-left:0px">Job Type:</label>
<select style="width: 90px" ng-model="JobType">
<option disabled>Select</option>
<option value="JobType-1">JobType</option>
<option value="JobType-2">JobType</option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:59px">Retainage:</label>
<select style="width:115px" ng-model="JobRetainage">
<option disabled>Select</option>
<option value="JobRetainage-1">JobRetainage-1</option>
<option value="JobRetainage-2">JobRetainage-2</option>
<option value="JobRetainage-3">JobRetainage-3</option>
</select>
<label style="margin-left:42px">Tax Exempt:</label>
<select style="width: 115px" ng-model="JobTaxExempt">
<option disabled>Select</option>
<option value="true">True</option>
<option value="false">False</option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:21px">Original Budget:</label>
<input style="width:115px" ng-model="JobOriginalBudget" type="text" format="number">
<label style="margin-left:39px">Ins Program:</label>
<select style="width: 115px" ng-model="JobInsProgram">
<option disabled>Select</option>
<option value="JobInsProgram-1">JobInsProgram-1</option>
<option value="JobInsProgram-2">JobInsProgram-2</option>
<option value="JobInsProgram-3">JobInsProgram-3</option>
</select>
</div>
</div><!--End col-xs-12-->
</tab><!--End Contract Tab-->
<tab heading="Contacts">Contacts go here</tab>
<tab heading="Document Distribution">Document Distribution go here</tab>
</tabset><!--End Tab Content-->
<div class="col-xs-12">
<input style="margin-left:345px;width:70px;margin-right:20px;margin-top:25px" ng-click="printNewJobModal(currentItem)" type="button" value="Print" go-click="#" />
<input style="margin-right: 20px; width: 70px; margin-top: 25px" type="submit" value="Save" go-click="#" />
<input style="width: 70px; margin-top: 25px" type="button" data-dismiss="modal" value="Exit" go-click="#" />
</div>
//New Job Modal
$scope.NewJobModal = function () {
$ekathuwa.modal({
id: "NewJobModal", contentStyle: "width:800px;heigth:400px",
scope: $scope,
templateURL: "ModalNewJob"
});
}
//Post New Job
$scope.submitJob = function () {
var data = {
JobId: $scope.JobId,
JobNumber: $scope.JobNumber,
JobName: $scope.JobName,
JobDescription: $scope.JobDescription,
JobOriginalContract: $scope.JobOriginalContract,
JobBillingDate: $scope.JobBillingDate,
JobTotalCO: $scope.JobTotalCO,
JobRevisedContract: $scope.JobRevisedContract,
JobOriginalBudget: $scope.JobOriginalBudget,
JobBillingForm: $scope.JobBillingForm,
JobTESPM: $scope.JobTESPM,
JobTESSuperintendent: $scope.JobTESSuperintendent,
JobStatus: $scope.JobStatus,
JobMoreShit: $scope.JobMoreShit,
JobHidden: $scope.JobHidden,
JobTaxExempt: $scope.JobTaxExempt,
JobCertPayroll: $scope.JobCertPayroll,
JobCost: $scope.JobCost,
JobRemainingBudget: $scope.JobRemainingBudget,
JobProfit: $scope.JobProfit,
JobPercentage: $scope.JobPercentage,
JobTotalBilled: $scope.JobTotalBilled,
JobBalanceToBill: $scope.JobBalanceToBill,
JobBalanceDue: $scope.JobBalanceDue,
JobAddress: $scope.JobAddress,
JobCity: $scope.JobCity,
JobState: $scope.JobState,
JobZipcode: $scope.JobZipcode,
JobCounty: $scope.JobCounty,
JobPhoneNumber: $scope.JobPhoneNumber,
JobFaxNumber: $scope.JobFaxNumber,
JobGeoArea: $scope.JobGeoArea,
JobClass: $scope.JobClass,
JobType: $scope.JobType,
JobMinWage: $scope.JobMinWage,
JobInsProgram: $scope.JobInsProgram,
CustomerName: $scope.CustomerName,
CustomerPhoneNumber: $scope.CustomerPhoneNumber,
CustomerFaxNumber: $scope.CustomerFaxNumber,
CustomerAddress: $scope.CustomerAddress,
CustomerCity: $scope.CustomerCity,
CustomerState: $scope.CustomerState,
CustomerZipcode: $scope.CustomerZipcode,
CustomerWebsite: $scope.CustomerWebsite,
CustomerOtherShit: $scope.CustomerOtherShit,
CustomerHidden: $scope.CustomerHidden,
CustomerPM: $scope.CustomerPM,
CustomerAdmin: $scope.CustomerAdmin,
CustomerAccountant: $scope.CustomerAccountant,
CustomerSuperintendent: $scope.CustomerSuperintendent
}
$http.post('/api/apiJob/PostNewJob', data).success(function (data, status, headers) {
console.log(data); window.top.location.reload();
});
<tab heading="Contract">
<div class="col-xs-12" style="margin-top:10px">
<div class="inline-fields">
<label style="margin-left:13px">Original Contract:</label>
<input style="width:115px" ng-model="JobOriginalContract.Value" type="text" format="number">
<label style="margin-left:57px">Geo Area:</label>
<select style="width: 115px" ng-model="JobGeoArea.Value">
<option disabled>Select</option>
<option value="JobGeoArea-1">JobGeoArea-1</option>
<option value="JobGeoArea-2">JobGeoArea-2</option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:69px">Total CO:</label>
<input style="width:115px" ng-model="JobTotalCO.Value" type="text" format="number">
<label style="margin-left:82px">Job Class:</label>
<select style="width: 115px; " ng-model="JobClass.Value">
<option disabled>Select</option>
<option value="JobClass-1">JobClass-1</option>
<option value="JobClass-2">JobClass-2</option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:11px">Revised Contract:</label>
<input style="width:115px" ng-model="JobRevisedContract.Value" type="text" format="number">
<label style="margin-left:55px">Min Wage:</label>
<select style="width:90px" ng-model="JobMinWage.Value">
<option disabled>Select</option>
<option value="1000">$1000</option>
<option value="2000">$2000</option>
</select>
<label style="margin-left:0px">Job Type:</label>
<select style="width: 90px" ng-model="JobType.Value">
<option disabled>Select</option>
<option value="JobType-1">JobType</option>
<option value="JobType-2">JobType</option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:59px">Retainage:</label>
<select style="width:115px" ng-model="JobRetainage.Value">
<option disabled>Select</option>
<option value="JobRetainage-1">JobRetainage-1</option>
<option value="JobRetainage-2">JobRetainage-2</option>
<option value="JobRetainage-3">JobRetainage-3</option>
</select>
<label style="margin-left:42px">Tax Exempt:</label>
<select style="width: 115px" ng-model="JobTaxExempt.Value">
<option disabled>Select</option>
<option value="true">True</option>
<option value="false">False</option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:21px">Original Budget:</label>
<input style="width:115px" ng-model="JobOriginalBudget.Value" type="text" format="number">
<label style="margin-left:39px">Ins Program:</label>
<select style="width: 115px" ng-model="JobInsProgram.Value">
<option disabled>Select</option>
<option value="JobInsProgram-1">JobInsProgram-1</option>
<option value="JobInsProgram-2">JobInsProgram-2</option>
<option value="JobInsProgram-3">JobInsProgram-3</option>
</select>
</div>
</div><!--End col-xs-12-->
</tab><!--End Contract Tab-->
};
是的，这是范围问题，在ng模型中始终有一个点，这样您就不会使用原始变量。我在ng模型中添加了.Value。但现在我收到一条错误消息，无法读取未定义的属性“Value”。请参阅更新的postmaking，它比您需要做的工作多得多，对整个表单使用相同的对象，然后不需要声明数据中的所有属性，只需将整个对象传递给post即可。Job.JobID、Job.JobName等。ng模型将为您创建所有属性，只需定义$scope.Job={}您可以在脚本文件中显示给我看看这个粗略的演示是否有帮助吗
<tab heading="Contract">
<div class="col-xs-12" style="margin-top:10px">
<div class="inline-fields">
<label style="margin-left:13px">Original Contract:</label>
<input style="width:115px" ng-model="JobOriginalContract.Value" type="text" format="number">
<label style="margin-left:57px">Geo Area:</label>
<select style="width: 115px" ng-model="JobGeoArea.Value">
<option disabled>Select</option>
<option value="JobGeoArea-1">JobGeoArea-1</option>
<option value="JobGeoArea-2">JobGeoArea-2</option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:69px">Total CO:</label>
<input style="width:115px" ng-model="JobTotalCO.Value" type="text" format="number">
<label style="margin-left:82px">Job Class:</label>
<select style="width: 115px; " ng-model="JobClass.Value">
<option disabled>Select</option>
<option value="JobClass-1">JobClass-1</option>
<option value="JobClass-2">JobClass-2</option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:11px">Revised Contract:</label>
<input style="width:115px" ng-model="JobRevisedContract.Value" type="text" format="number">
<label style="margin-left:55px">Min Wage:</label>
<select style="width:90px" ng-model="JobMinWage.Value">
<option disabled>Select</option>
<option value="1000">$1000</option>
<option value="2000">$2000</option>
</select>
<label style="margin-left:0px">Job Type:</label>
<select style="width: 90px" ng-model="JobType.Value">
<option disabled>Select</option>
<option value="JobType-1">JobType</option>
<option value="JobType-2">JobType</option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:59px">Retainage:</label>
<select style="width:115px" ng-model="JobRetainage.Value">
<option disabled>Select</option>
<option value="JobRetainage-1">JobRetainage-1</option>
<option value="JobRetainage-2">JobRetainage-2</option>
<option value="JobRetainage-3">JobRetainage-3</option>
</select>
<label style="margin-left:42px">Tax Exempt:</label>
<select style="width: 115px" ng-model="JobTaxExempt.Value">
<option disabled>Select</option>
<option value="true">True</option>
<option value="false">False</option>
</select>
</div>
<div class="inline-fields">
<label style="margin-left:21px">Original Budget:</label>
<input style="width:115px" ng-model="JobOriginalBudget.Value" type="text" format="number">
<label style="margin-left:39px">Ins Program:</label>
<select style="width: 115px" ng-model="JobInsProgram.Value">
<option disabled>Select</option>
<option value="JobInsProgram-1">JobInsProgram-1</option>
<option value="JobInsProgram-2">JobInsProgram-2</option>
<option value="JobInsProgram-3">JobInsProgram-3</option>
</select>
</div>
</div><!--End col-xs-12-->
</tab><!--End Contract Tab-->
};