htmlangularjs-1.5

how to bind input text and combo box in angularjs 1

I have two controls in a form.

zip code - (input type text) and city - (select options)

The back-end rest service sends json object which will contains zip codes and city names. I want to change city when zip code changed and vice versa using angularjs1. Also validate zip code with json object.

please help me...

Solution

  • Alright. So I am assuming that you have a serverside script from which you can get both city from pincode and pincode from city

    Now you have got 2 controls in your view.

    1) Input Box

    2) Combobox

    Now The easiest way according to me is that you should make a function that is called on ngChange event of both the controls.

    That function would make a request to your server and fetch the associated data and feed the data to the other control.

    Now when you populate the controls internally through the controller, it might again fire an ngChange function. So in each ngChange function you must have a reference of the desired values for them. That can be done by storing both the latest values received from server side into a local variable and checking it each time the function is called.

    I believe this would solve your problem.

    ----------------Update----------------

    As mentioned in the comment, the SPA shall not be sending request to the server during the execution. It shall simply send the json at the end.

    So for that its more convenient. Simply make 2 different functions, 1 getCityFromPincode(pincode) and 2 getPincodeFromCity(city)

    Now you can easily do your operations in javascript on the basis of the values that you will get from the ngChange() function.

    Just call the function getCityFromPincode in the ngChange function of your CITY INPUT Control and similarly for the other one.

    You would probably make it through with this approach.