javascript - Angular 状态下拉菜单绑定(bind)到国家/地区选择

Question

我试图有一个绑定(bind)到国家/地区的上下文状态下拉菜单，以便仅显示相关的状态。

我已经查看了这两个答案，以找到我的实现的解决方案。

Angularjs trigger country state dependency

angularjs dependant dropdown option value

但我无法让它们工作并且缺少一些东西。

我的首选解决方案是使用一些现有的 ng 过滤器，但我知道它仅适用于数组，不适用于对象

 <select ng-model="user.state" ng-options="state.name for state in states track by state.id | filter:state.countryid = user.country.id">

我尝试将对象转换为数组，但这似乎不起作用。

我可以创建一个自定义过滤器，但我希望避免这种情况。

 <select ng-model="user.state" ng-options="state.name for state in states track by state.id | customStateFilter:user.country.id">

似乎应该有某种方法可以让 ng-options 在不修改数据的情况下工作。

是否存在适用于对象的现有 Angular 过滤器或执行条件逻辑以动态过滤对象的方法？

Answer 1

您遇到了一些问题(除了 state.countryid 和 country.id 不匹配之外):

首先，track by位于过滤器之后(或者换句话说，过滤器位于数组之后，因为它过滤数组)。

第二，你是对的 - 内置过滤器 filter 仅适用于数组，不适用于对象。对于对象，您需要一个自定义过滤器。

最后，filter 过滤器不接受要计算的表达式 (filter:state.countryid = user.country.id,更不用说您尝试提供的这个“表达式”不会比较 ===，而是分配 =)。 filter 接受以下参数作为参数:string(用于匹配任何属性)、指定哪个属性与哪个值匹配的 Object 或谓词功能。

就您而言，您需要一个对象。

把这个东西放在一起你会得到:

<select ng-model="selectedState"
        ng-options="state.name for state in states | filter: {countryid: user.country.id}:true track by state.id">
  <option value="">select state</option>
</select>