Question

我想基于select和input过滤我拥有的ng-repeat。如果输入设置为all，则过滤所有字段，如果设置为不同的选择值，则仅过滤该字段。

我的HTML看起来像这样

<input type="search" class="form-control" id="searchBox" ng-model="searchText">

<select class="form-control" id="searchType" name="searchType" ng-model="searchType">
  <option value="all">All Fields</option>
  <option value="locationCode">Location Code</option>
</select>

<!-- more code -->

<tr ng-if="!searchAll" ng-repeat="location in locations | filter:{searchType: searchText}" ts-repeat>
<tr ng-if="searchAll" ng-repeat="location in locations | filter:searchText" ts-repeat>

当更改选项或输入时，我也会更新$location.search()，但这应该是我的控制器的相关部分：

$scope.$watch('searchType', function(value) {
  $location.search('t', value).replace();
  $scope.searchAll = $scope.searchType === 'all';
});

选择all时，我的过滤器可正常工作，但在选择其他值时根本不显示任何数据。但是，如果我在第一个searchType中对ng-if中的一个字段值进行硬编码，它确实有效。

我遗失了哪些明显的东西？

Answer 1

我不认为对象中的左手值可以变化。所以当你这样做时

location in locations | filter:{searchType: searchText}

您希望过滤器找到名为searchType的属性，而不是locationCode

我认为最简单的解决方法是在控制器中创建一个过滤功能并处理那里的开关。

类似的东西：

$scope.propertyFilter = function(item) {
  return item[$scope.searchType] == $scope.searchText;
}

然后在你的模板中

location in locations | filter:propertyFilter

我也想知道将对象视为字符串是否有效。像这样：

location in locations | filter:{{"{" + searchType + ":" + searchText + "}"}}

基于选择的角度滤波器特定字段

1 个答案: