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选项的JSON示例：

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

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

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

然而，我将此标记放在页面<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'">