AngularJS过滤器不起作用

Jonas 发表于 Dev

136

乔纳斯

我列出了一些赛车手，所以您可以在他们的名字上进行选择。我在视图中定义了以下过滤器：

    <input ng-model="nameFilter" type="text" name="nameFilter" class="form-control empty" placeholder="Search Driver name...">    
<table class="col-xs-12 table table-striped">
  <thead>
    <tr><th colspan="4"></th></tr>
  </thead>
  <tbody ng-controller="driversController">
    <tr ng-repeat="driver in driversList | filter: nameFilter">
      <td>{{$index + 1}}</td>
      <td>
        <img src="img/flags/{{driver.Driver.nationality}}.png" />
        <a href="#/drivers/{{driver.Driver.driversId}}">
        {{driver.Driver.givenName}} {{driver.Driver.familyName}}
      </a>
    </td>
      <td>{{driver.points}}</td>
    </tr>
  </tbody>
</table>

这个driverController在我的Controller.js文件中定义：

angular.module('FormulaOne.controllers', []).

  /* Drivers controller */
  controller('driversController', function($scope, F1APIservice) {


    $scope.nameFilter = null;
    $scope.driversList = [];

    //vraag 3a haal drivers op
    F1APIservice.getDrivers().success(function(response){
      //dig in the respone to get the relevant data
      $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
    });


    //vraag 3b zoek filter
    $scope.searchFilter = function (driver) {
    var keyword = new RegExp($scope.nameFilter, 'i');
    return !$scope.nameFilter || keyword.test(driver.Driver.givenName) || keyword.test(driver.Driver.familyName);
};

我想过滤驱动程序的名称或名字，但是它不起作用，问题是。它怎么来的？

查理

您input与的控制器不在同一控制器中ng-repeat。

将ng-controller移到更高的级别，以便ng-model和filter处于同一范围内

<div ng-controller="driversController">
    <input ng-model="nameFilter">    
    <table>
      <thead>
        <tr><th colspan="4"></th></tr>
      </thead>
      <tbody>
        <tr ng-repeat="driver in driversList | filter: nameFilter">
         <td>.....
        </tr>
       </tbody>
    </table>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。