如何将JavaScript下拉框返回值传入AngularJS参数调用API？

你现在的问题根源在于没必要用自定义的choice1函数来获取选中值，而且AngularJS指令表达式里的this和你预期的DOM元素不是一回事，这才导致了错误。AngularJS本身的ng-model已经帮你完成了视图和数据的绑定，直接用绑定的变量就可以了，不用手动操作DOM。

修正步骤： #

1. 移除多余的choice1函数
   完全不需要这个自定义函数，ng-model="reg.country"已经把选中的选项值同步到了reg.country变量中（这个变量会在你的控制器/组件作用域里）。

2. 修改ng-change的调用方式
   直接把绑定好的reg.country作为参数传给你的API调用函数即可：

<select 
  ng-change="getUserDetails.getUserDetails(reg.country)" 
  ng-model="reg.country" 
  formcontrol name="country" 
  class="ng-untouched ng-pristine ng-valid" 
  required
>
  <option value="">-Select Country-</option> <!-- 建议把value设为空字符串，原"0: "的写法不太规范 -->
  <c:forEach var="findAllCountries" items="${findAllCountries}" varStatus="theCount">
    <option value="${findAllCountries.id}">${findAllCountries.name}</option>
  </c:forEach>
</select>

为什么原来的写法会出错？ #

• 在AngularJS的模板表达式中，this指向的是当前的作用域（Scope），而不是你以为的<select>DOM元素。所以你把this传给choice1后，函数里尝试访问select.options自然会报错，因为this根本不是select元素。
• AngularJS的核心设计就是数据驱动视图，ng-model已经帮你完成了视图到数据的同步，手动操作DOM获取值是违背AngularJS设计理念的，也容易引发问题。

另外要确认一下：你的getUserDetails服务已经正确注入到对应的控制器/组件中，这样模板里才能正常调用它的方法哦。

内容的提问来源于stack exchange，提问作者rocket