Angular 过滤器在 1.3 版中无法正确过滤，在 1.5 版中是否更好？

Question

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

DATA（这是被 ng 重复的初始数据以及被过滤的内容：

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 下拉列表，它会在列表中的对象上显示指定的属性，这里它会显示上面显示的数据中的 name 属性，但是这个数据没有被正确过滤：

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

谢谢

Answer 1

Angular 过滤器完美运行，问题可能出在您的实现中...这是您的工作示例：

编辑：如果您想根据property 过滤数组，在您的情况下，您需要指示过滤器item in items | filter:{key:value}。 这是一个参考：How to filter by object property in 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>

Answer 2

你应该改变你的过滤器，比如 as-

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

    }