AngularJS過濾器不起作用

Question

我列出了一些賽車手，所以您可以在他們的名字上進行選擇。 我在視圖中定義了以下過濾器：

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

我想過濾驅動程序的名稱或名字，但是它不起作用，問題是。 怎么會這樣

Answer 1

您的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>