Angular - 无法通过使用 ng-repeat 进行选择进行过滤

Question

所以我有一个简单的表，上面有一个 ng-repeat。在它上面我有一个<select> 和一个国家列表。我希望能够在选择中选择一个国家，并让表格只显示该国家的项目。很简单。

这就是我选择的样子 <select ng-model="filter.place" ng-options="country.CountryName for country in countries"> <option value="">Select a Country</option> </select>

这是用于 ng-options 的 JSON 示例：

[
{
Id: 1
CountryName: "United Kingdom"
}
{
Id: 2
CountryName: "Afghanistan"
}
{
Id: 3
CountryName: "Albania"
}]

ng-repeat 非常标准：<tr ng-repeat="items in events | filter:filter.place"> 然后<td>{{items.Location.Country.CountryName}}</td>

每当我从选择中选择一个国家时，它都不会返回任何内容。

但是，我将此标签放在页面<p>{{filter.place}}</p> 上以查看模型的内容，它看起来像{"Id":7,"CountryName":"Argentina"} 所以有些东西告诉我它的模型有错误的格式数据要过滤。我怎样才能清理它以便正确过滤？

Answer 1

filter.place 的结构与events 中的项目结构不匹配，因此您不能使用模式对象作为过滤器。您可以使用自定义谓词进行过滤：

JS

$scope.matchesSelectedCountryId(item) {
    return item.Location.Country.Id === $scope.filter.place.Id;
}

HTML

<tr ng-repeat="event in events | filter:matchesSelectedCountryId">

或者您可以只按国家/地区名称过滤：

<tr ng-repeat="event in events | filter:'filter.place.CountryName'">