基于用户选择的过滤纳克选项 [英] Filtering ng-options based on user selection

问题描述

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

I have two select elements. The first one is used to select a country. The second one is used to select a state.

每个国家被绑定到一个国家。

Every state is bound to a country.

美国：

[{"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内容：

HTML Content:

<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

So, first, the user selects a country, which gets associated to "userCountry".

$scope.userCountry = new Object();

现在，各州的选择元素应该只显示国该国有关，但目前它加载所有状态。它不工作：（

Now, the states select element should display only states associated with that country, but its currently loading all states. It's not working :(

我不知道如果即时通讯使用正确的语法。谁能帮我？

I don't know If Im using the right syntax. Can anyone help me?

这是我的过滤器：

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

我试过很多不同的变化都没有成功。

I tried many different variations without success.

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

Here is a Fiddle with my problem: http://jsfiddle.net/zrm7y80s/2/

它采用棱角分明1.2.23

It uses angular 1.2.23

感谢您!!

推荐答案

更改您的NG-选项是：

Change your ng-options to this:

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

您要你做道之前，运行过滤器，你也想要过滤的子对象上，为state.country。code是作为一个对象键无效。

You want to run the filter before you do the track by, also you want to filter on the sub object, as state.country.code is invalid as an object key.

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

这篇关于基于用户选择的过滤纳克选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！