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

Angular - 无法通过选择ng-repeat进行筛选

1 个答案: