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

Question

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

数据(这是正在重复的初始数据以及正在过滤的数据:

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>

Controller :

     // 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 过滤器工作完美，问题可能出在您的实现中......这是您的工作示例:

EDIT: if you want to filter an array based on a property, name in your case, you need to instruct the filter item in items | filter:{key:value}. this is a reference: 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>