在AngularJS中使用多选过滤范围

Question

这是我的小提琴：http://jsfiddle.net/mwrLc/12/

<div ng-controller="MyCtrl">
<select ng-model="searchCountries" ng-options="cc.country for cc in countriesList | orderBy:'country'">
    <option value="">Country...</option>
</select>
<select ng-model="searchCities" ng-options="ci.city for ci in citiesList | filter:searchCountries | orderBy:'city'">
    <option value="">City...</option>
</select>
<ul>
    <li ng-repeat="item in list | filter:searchCountries | filter:searchCities">
        <p>{{item.country}}</p>
        <p>{{item.city}}</p>
        <p>{{item.pop}}</p>
        <br>
    </li>
</ul>

第一个选择过滤第二个，但也过滤结果列表。
第二个选择仅过滤结果列表。
在选择一个国家和一个城市之前，它非常有效。然后，当您选择另一个国家/地区时，第二个选择被重置，但范围似乎卡在旧值上。

我找不到让它正常工作的方法...请帮助！

Answer 1

Ezekiel Victors 的解决方案非常出色。但是，在从 ng-include 引用控制器时，我试图让它工作时遇到了一些依赖注入问题。感谢 Ben Tesser 的帮助，我能够解决这个问题。我附上了一个详细说明修复的jsfiddle：

http://jsfiddle.net/uxtx/AXvaM/

主要区别在于您需要将 searchCountry/searchCity 包装为一个对象并将默认值设置为 null。手表也是如此。

  $scope.test = {
    searchCountry: null,
    searchCity: null
};
/// And your watch statement ///
    $scope.$watch('test.searchCountry', function () {
        $scope.test.searchCity =  null;
});

在您的模板中，您会将所有引用从 searchCountry/searchCity 更改为 test.searchCountry。

我希望这可以节省一些时间。很麻烦。

Answer 2

最好的解决方案是在通过$scope.$watch() 检测到更改为国家/地区模型时重置城市模型：

function MyCtrl($scope) {
    // ...

    $scope.$watch('searchCountry', function() {
        $scope.searchCity = null;
    });
}

请注意，我将您的模型名称更改为单数形式（“searchCountry”和“searchCity”），考虑到这些模型的值设置为单个国家或城市，这更合适。

这是完整的工作示例：http://jsfiddle.net/evictor/mwrLc/13/