根据用户选择过滤 ng-options答案

【问题标题】：Filtering ng-options based on user selection根据用户选择过滤 ng-options
【发布时间】：2015-01-09 09:24:17
【问题描述】：

我有两个 select 元素。第一个用于选择国家。第二个用于选择状态。

每个州都与一个国家有关。

州：

[{"code":"SC","name":"Santa Catarina","country":{"code":"BRA","name":"Brazil"}},    {"code":"RR","name":"Roraima","country":{"code":"BRA","name":"Brazil"}},{"code":"AL","name":"Alabama","country":{"code":"USA","name":"United States"}},{"code":"FL","name":"Florida","country":{"code":"USA","name":"United States"}}]

国家：

[{"code":"BRA","name":"Brasil"},{"code":"USA","name":"United States"}]

HTML 内容：

<select ng-model="userCountry" ng-options="country.name for country in countries track by country.name">

 <select ng-model="userState" ng-options="state.name for state in states track by state.name | filter: {state.country.code:userCountry.code}">

因此，首先，用户选择一个与“userCountry”相关联的国家/地区。

$scope.userCountry = new Object();

现在，states select 元素应该只显示与该国家相关的州，但它当前正在加载所有州。它不工作:(

我不知道我是否使用了正确的语法。谁能帮帮我？

这是我的过滤器：

| filter: {state.country.code:userCountry.code}

我尝试了许多不同的变体，但都没有成功。

这是我的问题的一个小提琴： http://jsfiddle.net/zrm7y80s/2/

它使用角度 1.2.23

谢谢！！

【问题讨论】：

标签： angularjs filter ng-options

【解决方案1】：

将您的 ng-options 更改为：

<select ng-model="userState" ng-options="state.name for state in ( states | filter: {country: { code: userCountry.code }}) track by state.name">

您想在跟踪之前运行过滤器，还想过滤子对象，因为 state.country.code 作为对象键无效。

更新小提琴：http://jsfiddle.net/dw20jakt/

【讨论】：