javascript - 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'">