如何绑定angularjs 1中的输入文本和组合框

时间:2022-02-15 06:28:13

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.

后端休息服务发送包含邮政编码和城市名称的json对象。我希望在邮政编码改变时更改城市,反之亦然使用angularjs1。还使用json对象验证邮政编码。

please help me...

请帮帮我...

1 个解决方案

#1


1  

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.

现在,您的视图中有2个控件。

1) Input Box

1)输入框

2) Combobox

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.

现在,根据我的最简单的方法是你应该创建一个在两个控件的ngChange事件上调用的函数。

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.

现在,当您通过控制器在内部填充控件时,它可能会再次触发ngChange函数。因此,在每个ngChange函数中,您必须具有所需值的引用。这可以通过将从服务器端接收的最新值存储到局部变量中并在每次调用函数时检查它来完成。

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.

如评论中所述,SPA在执行期间不应向服务器发送请求。它应该只是在最后发送json。

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

所以为此更方便。只需制作2个不同的功能,1个getCityFromPincode(pincode)和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.

现在,您可以根据从ngChange()函数获得的值,轻松地在javascript中执行操作。

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

只需在CITY INPUT Control的ngChange函数中调用函数getCityFromPincode,对另一个调用类似。

You would probably make it through with this approach.

您可能会通过这种方法完成它。

#1


1  

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.

现在,您的视图中有2个控件。

1) Input Box

1)输入框

2) Combobox

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.

现在,根据我的最简单的方法是你应该创建一个在两个控件的ngChange事件上调用的函数。

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.

现在,当您通过控制器在内部填充控件时,它可能会再次触发ngChange函数。因此,在每个ngChange函数中,您必须具有所需值的引用。这可以通过将从服务器端接收的最新值存储到局部变量中并在每次调用函数时检查它来完成。

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.

如评论中所述,SPA在执行期间不应向服务器发送请求。它应该只是在最后发送json。

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

所以为此更方便。只需制作2个不同的功能,1个getCityFromPincode(pincode)和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.

现在,您可以根据从ngChange()函数获得的值,轻松地在javascript中执行操作。

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

只需在CITY INPUT Control的ngChange函数中调用函数getCityFromPincode,对另一个调用类似。

You would probably make it through with this approach.

您可能会通过这种方法完成它。