Question

我目前正在我的控制器中使用内置的角度过滤器“$ 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 },
        ];

TEMPLATE：

  <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});

    }

Angular过滤器在版本1.3中没有正确过滤，在版本1.5中是否更好？

2 个答案: