角度过滤器在1.3版本中过滤不正确，在1.5版本中更好吗

Angular filter not filtering correctly in version 1.3, is it better in version 1.5?

本文关键字：版本 更好 不正确 过滤 过滤器      更新时间：2024-06-30

我目前正在控制器中使用内置的角度过滤器"$filter"来过滤数据的下拉列表，但过滤器根本无法正确过滤数据。它会对其进行筛选，但筛选出的数据与正在键入的文本不匹配。我读到1.3中过滤器在对象和数组上的状态可能存在一些问题？我想知道这是版本问题，还是我在代码中做了一些错误的事情？我正在考虑升级到1.5，所以我只是好奇我的问题是否会在1.5中得到解决，或者我是否有语法错误。这是我所拥有的：

DATA（这是正在重复的初始数据，以及正在过滤的内容：

this.items = [
            { name: 'Jim', city: 'Minneapolis', state: 'MN', zip: 44332 },
            { name: 'Boe', city: 'Scottsdale', state: 'AZ', zip: 44332 },
            { name: 'Tom', city: 'S.F.', state: 'CA', zip: 11223 },
            { name: 'Joe', city: 'Dallas', state: 'TX', zip: 34543 },
            { name: 'Jon', city: 'L.A.', state: 'CA', zip: 56433 },
        ];

模板：

  <input type="text" class="form-control" name="inputField" ng-change="ctrl.filterTextChangeLocal($event)" ng-model="ctrl.ngModelValue" ng-click="ctrl.openDropdown($event)" />

以上输入过滤以下列表：

  <ul class="dropdown-menu list-group" ng-if="!ctrl.ngDisabled">
    <li class="list-group-item" ng-repeat="row in ctrl.filteredItems"
    ng-mousedown="ctrl.onSelectedLocal(row, $event)">
        {{row[ctrl.itemDisplayProperty]}}
    </li>
    <li class="list-group-item text-center" ng-show="ctrl.filteredItems.length <= 0">
        {{ctrl.noResultsMessage}}
    </li>
</ul>

控制器：

     // filter the drodpown data
     //$event is being used to check for specific keypresses but doesn't matter here
     //ngModelValue is bound to ng-model inside the input
    public filterTextChangeLocal($event: ng.IAngularEvent) {
          this.filteredItems = this.$filter("filter")(this.items, this.ngModelValue);
    }

上面的结果是一个简单的bootstrap ul下拉列表，它将在列表中的对象上显示指定的属性，在这里它将显示上面显示的数据中的名称属性，但这些数据没有被正确过滤：

 <li>Jim</li>
 <li>Boe</li>
 <li>Tom</li>
 <li>Joe</li>
 <li>Jon</li>

感谢

角度过滤器工作得很好，问题可能存在于您的实现中。。。以下是您的工作示例：

EDIT：如果你想根据property过滤数组，在你的情况下，你需要指示过滤器item in items | filter:{key:value}。这是一个参考：如何在angularJS 中按对象属性过滤

function TestCtrl($scope, data) {
  var vm = $scope;
  
  vm.items = data;
  vm.query = '';
}
angular
  .module('test', [])
  .value('data', [
    { name: 'Jim', city: 'Minneapolis', state: 'MN', zip: 44332 },
    { name: 'Boe', city: 'Scottsdale', state: 'AZ', zip: 44332 },
    { name: 'Tom', city: 'S.F.', state: 'CA', zip: 11223 },
    { name: 'Joe', city: 'Dallas', state: 'TX', zip: 34543 },
    { name: 'Jon', city: 'L.A.', state: 'CA', zip: 56433 },
  ])
  .controller('TestCtrl', ['$scope', 'data', TestCtrl])
;
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";
.form-group {
  padding-top: 1em;
  padding-bottom: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="test">
  <article ng-controller="TestCtrl">
    <div class="row form-group">
      <div class="col-xs-10 col-xs-offset-1">
        <input type="text" ng-model="query" class="form-control"/>
      </div>
    </div>
    
    <div class="data" ng-repeat="item in items | filter:{name: query} track by $index">
      
      <div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading" ng-bind="item.name"></h4>
    <p>
      <span ng-bind="item.city"></span> - 
      <span ng-bind="item.state"></span> - 
      <span ng-bind="item.zip"></span>
    </p>
  </div>
</div>
      
    </div>
  </article>
</section>

您应该将过滤器更改为-

public filterTextChangeLocal($event: ng.IAngularEvent) {
          this.filteredItems = this.$filter("filter")(this.items, {'name':this.ngModelValue});
    }
相关文章：