绑定到国家选择的角度状态下拉列表

Question

我正在尝试创建一个与国家/地区绑定的上下文状态下拉菜单，以便仅显示相关状态。

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

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>