角度狀態下拉列表綁定到國家/地區選擇

Question

我正在嘗試綁定到國家/地區的上下文狀態下拉菜單，以便僅顯示相關國家。

我已經看過這兩個答案，為我的實現提供了解決方案。

AngularJS觸發國家/地區依存關系

與angularjs相關的下拉選項值

但是我無法讓他們工作，並且缺少一些東西。

我的首選解決方案將使用一些現有的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僅適用於數組，而不適用於對象。 對於對象，您需要一個自定義過濾器。

最后 ， 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>