Question

我之前已经过多次过滤，但我遇到了这个具体案例的问题。我有一个在分页中设置的对象列表，但我也希望能够过滤它们以方便使用。示例对象可能如下所示：

{
    baseline:0.75
    clonedFrom:Object
    description:"Just a simple description.."
    includeable:false
    key:"bc889881-7979-4e04-b586-d53faab26b6b"
    name:"Just a simple question?"
    type:"BayesianModel"
    version:1483477351992
    versionComment:null
    versionLabel:"0.11"
}

在大多数情况下，对象的外观是任意的，我只是将其包含在内以便于回答。我试图同时过滤对象的name和description。例如，如果用户知道关键词，他们可以缩小结果范围。

我有input的过滤条件，结果显示在<ul>内，如下所示：

<ul class="list-group">
  <li class="list-group-item">
    <div class="form-group has-feedback">
      <input type="text"
          ng-model="vm.resultFilter"
          ng-change="vm.updateFilter()"
          class="form-control filterInput"
          placeholder="Filter Results" />
      <span ng-if="vm.resultFilter"
          ng-click="vm.resultFilter = ''; vm.updateFilter();"
          class="fa fa-times fa-lg form-control-feedback">
      </span>
    </div>
  </li>
  <li class="list-group-item link-row model-list"
      ng-repeat="result in vm.filteredResults
          | startFrom : ((vm.currentPage - 1) * vm.itemsPerPage)
          | limitTo: vm.itemsPerPage"
      ng-if="result.name != vm.model.name"
      ng-click="vm.selected = result;"
      ng-class="{selected: result === vm.selected}"
      ng-init="displayNumber = vm.incrementDisplayIndex();">
    <h4 class="list-group-item-heading">{{result.description}} - {{result.name !== vm.model.name}}</h4>
    <p class="list-group-item-text">
      {{result.name}}
    </p>
  </li>
</ul>

因此，过滤器的名称为vm.resultFilter，并且每次更新过滤器时调用的相应方法都是updateFilter()（这对于分页内容是必需的）。

function updateFilter() {
  vm.filteredResults = $filter('filter')(vm.results, {
    'name': vm.resultFilter,
    'description': vm.resultFilter
  });
  vm.totalItems = vm.filteredResults.length;
  vm.noOfPages = Math.ceil(vm.filteredResults.length / vm.itemsPerPage);
}

我只是在使过滤工作100％时遇到问题。有时看起来它只是在描述字段上进行过滤，但有时我会搜索只有一个结果的描述字段中的单词，它将过滤而没有结果（这将是错误的）。任何提示赞赏。

Answer 1

由于您没有在HTML中使用filter，我建议您使用Array原型中的filter属性。

function updateFilter() {
  vm.filteredResults = vm.results.filter(function(item){
    return (item.name==vm.resultFilter || item.description==vm.resultFilter )
  }

  vm.totalItems = vm.filteredResults.length;
  vm.noOfPages = Math.ceil(vm.filteredResults.length / vm.itemsPerPage);
}

如果您需要确定字符串是否包含指定字符串的字符。您可能需要使用includes代替==

vm.filteredResults = vm.results.filter(function(item){
   return (item.name.includes(vm.resultFilter) || item.description.includes(vm.resultFilter) )
}

AngularJs过滤两个对象字段

1 个答案: