角度-无法通过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'">