2016-06-22 7 views
2

Я преобразовываю свой существующий проект в angularJs и есть объект JS I, который я постоянно обновляю на форме submit.Как обновить существующий объект JS с помощью форм - Angular JS

autoquoteDTO.js:

$.getAutoQuoteObject = function() { 
    var autoQuoteObject = new autoQuote(); 
    autoQuoteObject.DriverVehicleInfo = new DriverVehicleInfo(); 
    autoQuoteObject.DriverVehicleInfo.Vehicles = []; 
    autoQuoteObject.DriverVehicleInfo.Drivers = []; 
    autoQuoteObject.ApplicationInfo = new ApplicationInfo(); 
    autoQuoteObject.ApplicationInfo.Discount = new Discount(); 
    autoQuoteObject.ApplicationInfo.GeneralPartyInfo = new GeneralPartyInfo(); 
    autoQuoteObject.ApplicationInfo.GeneralPartyInfo.ContactInfo = new Contact(); 
    autoQuoteObject.ApplicationInfo.MostRecentInsurance = new MostRecentInsurance(); 
    autoQuoteObject.RequestedCoverage = new RequestedCoverage(); 
    autoQuoteObject.RequestedCoverage.PolicyCoverage = new PolicyCoverage(); 
    autoQuoteObject.RequestedCoverage.PolicyCoverage.Coverages = []; 
    autoQuoteObject.RequestedCoverage.VehicleCoverage = []; 
    autoQuoteObject.SessionInfo = new SessionInfo(); 
    return autoQuoteObject; 
} 

function autoQuote() { 
    this.DriverVehicleInfo = null; 
    this.ApplicationInfo = null; 
    this.RequestedCoverage = null; 
    this.SessionInfo = null; 
} 
var DriverVehicleInfo = function() { 
    this.Drivers = []; 
    this.Vehicles = []; 
    this.DriverVehicleUsages = []; 
}; 
var Driver = function() { 
    this.ID = null, this.PersonInfo = null, this.DriverRelationshipToApplicant = null, this.DriverRelationshipToApplicantCd = null, this.DriverLicense = null, this.DriverDetails = [], this.Incident = null, this.IsValid = false 
}; 
var PersonInfo = function() { 
    this.FirstName = null, this.Initial = null, this.LastName = null, this.Suffix = null, this.SSN = null, this.GenderCd = null, this.BirthDate = null, this.MaritalStatusCd = null, this.OccupationClassCd = null, this.YearsOccupation = null, this.HighestEducation = null, this.AgeInYears = 0, this.SpouseLicenseStatus = null 
}; 
var DriverLicense = function() { 
    this.AgeLicense = null, this.USLicenseStatus = null, this.DriverLicenseNumber = null, this.StateProvCd = null 
}; 
var DriverDetail = function() { 
    this.DriverDetailCd = null, this.DriverDetailValue = null, this.DriverDetailDate = null 
}; 
var Incident = function() { 
    this.ClaimAccidentsCount = null, this.ViolationsCount = null, this.HasLicenseBeenRevoked = null, this.LicenseSuspensionRevokedDate = null, this.HasRequiredCourtOrderedFinancial = null, this.ClaimAccidents = [], this.Violations = [], this.DUIs = [] 
}; 
var DUI = function() { 
    this.DateOfDUI = null, this.OtherValues = [] 
}; 
var ClaimAccident = function() { 
    this.Id = null, this.ClaimAccidentCd = null, this.displayText = null, this.ClaimAccidentDate = null, this.DateDisplayText = null, this.Comprehensive = null, this.Collision = null, this.RentalReimbursement = null, this.MedicalPayment = null, this.PayToOtherParty = null, this.IsInjury = null, this.IsPropertyDamage = null 
}; 
var Violation = function() { 
    this.Id = null, this.ViolationCd = null, this.ViolationDate = null, this.displayText = null 
}; 
var Vehicle = function() { 
    this.ID = null, this.VehicleHaveVin = false, this.VehicleIdentificationNumber = null, this.VehicleYear = null, this.VehicleMake = null, this.VehicleModel = null, this.VehicleSubModel = null, this.AntiLockBrakeCd = null, this.AntiTheftDeviceCd = null, this.VehicleUseCd = null, this.NumDaysDrivenPerWeek = null, this.DistanceOneWay = null, this.EstimatedAnnualDistance = null, this.OwnershipCd = null, this.RegistrationStateProvCd = null, this.VehIdentificationNumber = null, this.IsCustomizedOrAltered = null, this.OriginalVehicleCost = null, this.IsValid = false, this.VehicleType = null, this.VehicleVinStub = null, this.ShowVehicleAntiLockBrakeInfo = false, this.VehicleCost = null, this.ShowVehicleCost = false, this.DaytimeLights = null 
}; 
var DriverVehicleUsage = function() { 
    this.DriverIDRef = null, this.VehicleIDRef = null, this.Usage = null 
}; 
var ApplicationInfo = function() { 
    this.GeneralPartyInfo = null, this.Discount = null, this.MostRecentInsurance = null, this.ConsumerContactAuth = null, this.ConsumerInfoAuthorization = null, this.ConsumerContactMobileAuth = null 
}; 
var GeneralPartyInfo = function() { 
    this.MainApplicantDriverIDRef = null, this.Address = null, this.PreviousAddress = null, this.ContactInfo = null, this.ResidenceInfo = null, this.ListedVehiclesRegisteredTo = null, this.CreditScore = 0 
}; 
var AddressInfo = function() { 
    this.Address = null, this.City = null, this.State = null, this.PostalCode = null, this.County = null 
}; 
var PreviousAddress = function() { 
    this.Address = null, this.City = null, this.State = null, this.PostalCode = null, this.County = null 
}; 
var Contact = function() { 
    this.Phones = [], this.Emails = [] 
}; 
var Email = function() { 
    this.EmailTypeCd = null, this.EmailAddress = null 
}; 
var Phone = function() { 
    this.PhoneTypeCd = null, this.PhoneNumber = null 
}; 
var Residence = function() { 
    this.LengthAtCurrentAddressCd = null, this.ResidenceTypeCd = null, this.NumberDriversInHouseHold = null, this.VehiclesRegistedToInsured = null, this.DriverResidentsFromFL = null, this.CityLimits = null 
}; 
var Discount = function() { 
    this.ResidentialInsurancePolicy = null, this.OwnBoat = null, this.OwnMotorCycle = null, this.IsAAAMember = null 
}; 
var MostRecentInsurance = function() { 
    this.HasAutoInsurance = null, this.InsuranceCompanyName = null, this.CurrentInsurancePaying = null, this.LengthWithCurrentInsuranceCd = null, this.BodilyInjuryLiabilityLimit = null, this.LengthContinuouslyInsuredCd = null, this.ExpirationDate = null, this.InsuranceCanceledForNonPay = null, this.ClaimDeniedDueToFraud = null 
}; 
var RequestedCoverage = function() { 
    this.EffectiveDate = null, this.StateCd = null, this.PolicyCoverage = null, this.VehiclesCoverage = [] 
}; 
var PolicyCoverage = function() { 
    this.Coverages = [] 
}; 
var Coverage = function() { 
    this.CoverageCd = null, this.CoverageValue = null 
}; 
var VehicleCoverage = function() { 
    this.IsValid = false, this.VehicleIDRef = null, this.Coverages = [] 
}; 
var SessionInfo = function() { 
    this.SessionId = '', this.SecurityToken = '', this.Zip = '', this.StateCode = '', this.PageName = '', this.PageTheme = '', this.CarrierId = -1, this.ReturnedCarrierTypes = null, this.CoveragePackage = '', this.UseExistingSession = false, this.QuoteStatus = '', this.SID = -1, this.SRC = null, this.SRC_QCP = null, this.Referral = null, this.ClientIP = null, this.BrowserType = null, this.CLK = 0, this.QTR = '', this.CCID = '', this.AFF = '', this.PreviousSessionId = '', this.IgnoreErrors = false, this.RetrieveSource = '', this.PreviousPageName = '' 
} 

prapareJson.js:

var prepareAutoQuoteDTO = { 
    postAutoQuoteObj: $.getAutoQuoteObject(), 
    initializeDriverObj: function() 
    { 
     var driverLocObj   = new Driver(); 
     driverLocObj.PersonInfo = new PersonInfo(); 
     driverLocObj.DriverLicense = new DriverLicense(); 
     driverLocObj.Incident  = new Incident(); 
     return driverLocObj; 
    }, 

    initializeAppInfo: function() 
    { 
     var appInfoLocObj   = new ApplicationInfo(); 
     appInfoLocObj.Discount  = new Discount(); 
     return appInfoLocObj; 

    }, 
    /* 
    * Initialize Vehicle object for autoQuoteDTO.js 
    */ 
    initializeVehicleObj: function() 
    { 
     var vehicleLocObj = new Vehicle(); 
     return vehicleLocObj; 
    }, 

    rc1Step1DTO: function() 
    { 
     /* 
     * store session info 
     */ 
     var emailId = $('#save_quote_email').val(); 
     if (typeof emailId !== "undefined" && emailId && emailId != '' && emailId != 'Email Address') 
     { 
      var email   = new Email(); 
      email.EmailTypeCd = 'PRIMARY'; 
      email.EmailAddress = emailId; 
      this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo = this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo || new Contact(); 
      this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails = []; 
      this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails.push(email); 
     } 
}; 

обновление на JSON код события пользователя:

prepareAutoQuoteDTO.rc1Step1DTO(); 

Новый Угловая JS код, который должен обновить объект JS:

(function(){ 
    "use strict"; 
    angular 
    .model("autoQuote") 
    .controller("prepareDTO","prepareDTO") 
    .controller("postDTO","postDTO"); 
     /* 
     * Call actions on page load 
     */ 
    var init = function() { 
       prepareDTO();  
     } 
     init(); 

     /* 
     * prepare DTO with form elements. 
     */ 
     function prepareDTO() 
    { 
     var vm = this; 
     vm.postAutoQuoteObj = []; 
    } 

     /* 
     * post DTO on form submit and page onload. 
     */ 
     function postDTO() 
     { 

     }  

}); 

Форма логика должна содержаться в prepareDTO Funtion.

Ожидаемое поведение, если представлена ​​форма шага 1, необходимо набрать rc1Step1DTO и сохранить данные JS.

Ищет предложения для достижения этой и лучшей практики.

Plunker моего полного кода http://plnkr.co/edit/VJKrDRMJY3Q73bsCgVwX?p=preview.

Я могу удалить/отредактировать этот файл и все в Angular JS, но лежать, как это сделать в AngularJS.

+1

Существует не хватает информации, что вы пытаетесь сделать: создать форму в угловом образом и отправить данные на сервер на представить? Если это так, вы должны проверить «образец формы angularjs» в сети, такой вопрос не подходит для SO. – Walfrat

+0

Я добавил json, в котором я добавлял информацию о ui onload или форме submit. Я просто хочу знать, как использовать такой json в angualr js. Я хочу добавить prepareAutoQuoteDTO в autoQuote. –

+1

Вы не понимаете JSON и Javascript Object, JSON - это формат серализации, это огромная строка в определенном формате, используемом между различными программами для обмена информацией. Что вы имеете здесь, это обычный объект Javascript, если вы передаете объекты в $ htt.post, angularJS автоматически преобразует их в JSON. Это случается часто, потому что синтаксис Javascript при объявлении объекта с несколькими уровнями является таким же, как формат JSON. – Walfrat

ответ

2

Вы можете переместить весь свой код на завод, а затем ввести его в контроллер. Все ваши другие зависимости (например, Driver) должны быть включены до того, как это будет выполнено или может быть даже объявлено в функции prepareDtoFactory.

angular 
.model("autoQuote") 
.controller(dtoController) 
.factory(prepareDtoFactory); 

function dtoController(prepareDtoFactory){ 
    prepareDtoFactory.rc1Step1DTO(); //call function from your service, and do something with it 
} 

dtoController.$inject = ['prepareDtoFactory']; 

function prepareDtoFactory(){ 

    var prepareAutoQuoteDTO = { 
     postAutoQuoteObj   : $.getAutoQuoteObject(), 
     initializeDriverObj: function(){ 
      var driverLocObj   = new Driver(); 
      driverLocObj.PersonInfo = new PersonInfo(); 
      driverLocObj.DriverLicense = new DriverLicense(); 
      driverLocObj.Incident  = new Incident(); 
      return driverLocObj; 
     }, 
     initializeAppInfo: function(){ 
      var appInfoLocObj   = new ApplicationInfo(); 
      appInfoLocObj.Discount  = new Discount(); 
      return appInfoLocObj; 
     }, 
     /* 
     * Initialize Vehicle object for autoQuoteDTO.js 
     */ 
     initializeVehicleObj: function(){ 
      var vehicleLocObj = new Vehicle(); 
      return vehicleLocObj; 
     }, 
     /* 
     * store session info 
     */ 
     rc1Step1DTO: function(){ 

      var emailId = $('#save_quote_email').val(); 
      if (typeof emailId !== "undefined" && emailId && emailId != '' && emailId != 'Email Address'){ 
       var email   = new Email(); 
       email.EmailTypeCd = 'PRIMARY'; 
       email.EmailAddress = emailId; 
       this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo =  this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo || new Contact(); 
       this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails = []; 
       this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails.push(email); 
      } 
     } 
    }; 
    return prepareAutoQuoteDTO; 
} 
+1

Это действительно полезное предложение. Здесь, в шагах 1 и 2, у меня есть форма со входами. когда я отправляю эту форму, я хочу вызвать dtoController и отправить эти данные на сервер (api) для сохранения. Как вызвать эту функцию и отправить данные на сервер. –

+0

Полный код можно увидеть здесь http://plnkr.co/edit/VJKrDRMJY3Q73bsCgVwX?p=preview –

+1

Ошибка при включении кода. Ошибка [$ инжектор: pget] Функция-провайдер prepareDtoFactory() должна определять метод $ get factory. –

0

после AJS guide:

HTML

<div ng-controller="prepareDTO as pdt"> 
    <form novalidate class="simple-form"> 
    E-mail: <input type="email" ng-model="pdt.user.email" /><br /> 
    <input type="button" ng-click="pdt.reset()" value="Reset" /> 
    <input type="submit" ng-click="pdt.update(user)" value="Save" /> 
    </form> 
    <pre>user = {{user | json}}</pre> 

</div> 

app.js

function prepareDTO() 
    { 
     var vm = this; 

     vm.user = { 
      email: '' 
     }; 

     vm.update = function(user){ 
      prepareAutoQuoteDTO.rc1Step1DTO(user.email); 

     } 
    } 

Обратите внимание, что prepareAutoQuoteDTO.rc1Step1DTO в о rder избежать ошибок следует изменить:

rc1Step1DTO: function(email) 
    { 
     /* 
     * store session info 
     */ 
     var emailId = email; 
     if (typeof emailId !== "undefined" && emailId && emailId != '' && emailId != 'Email Address') 
     { 
      var email   = new Email(); 
      email.EmailTypeCd = 'PRIMARY'; 
      email.EmailAddress = emailId; 
      this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo = this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo || new Contact(); 
      this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails = []; 
      this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails.push(email); 
     } 
} 
Смежные вопросы