AngularJS фильтр не работает

0

Я составляю список гоночных водителей, поэтому вы можете выбрать их на свое имя. На мой взгляд, я определил следующий фильтр:

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

Я хочу отфильтровать имя или первое имя драйвера, но это не работает, вопрос. Как это получилось?

Теги:
filter
controller

1 ответ

2
Лучший ответ

Ваш 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>
  • 0
    это меня удовлетворяет и выглядит правильно, я собираюсь проверить.
  • 0
    по какой-то причине это не работает.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню