фильтр не определен в моем JavaScript в угловых JS

Question

У меня проблема с тем, что я использую фильтр в своем коде javascript и его работу, но проблема, которая проявляется в ошибке в консоли.я использовал этот код для html:

 <input type="range" min="0" max="100" step="1" ng-model="ctrl.inputAge" />
        100</p>
        <span>current min age: {{ ctrl.inputAge }}</span>
       <ul>
        <li ng-repeat="person in ctrl.people | ageFilter:ctrl.inputAge ">{{ person.name }} ({{ person.age }})</li>

, так что это мой код фильтра:

  var ctrl = this;

    ctrl.inputAge = 25;

.filter('ageFilter', function() {
    return function(input, minAge) {
      return input.filter(function (person) {
          return person.age >= +minAge;
      });
    }
  });

, поэтому я нашел эту ошибку в своей консоли:

 TypeError: Cannot read property 'filter' of undefined

Answer 1

Вы "подключаете" filter к существующему модулю?фильтр, определенный с помощью .filter (также при использовании .controller, .factory, .service и т. д.) должен существовать в области, определенной модулем.У вас есть рабочий пример ниже.

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {
  $scope.myPersons = [{
    name: "Joe",
    age: 30
  }, {
    name: "Mary",
    age: 36
  }, {
    name: "George",
    age: 45
  }];
});

app.filter('ageFilter', function() {
  return function(items, threshold) {
    return items.filter(i => i.age > threshold);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  {{ testString }}
  
  <div ng-repeat="x in myPersons | ageFilter:35">
    {{ x.name }} - {{ x.age }} 
  </div>
</div>

Вы можете видеть, что я использовал app.filter, где app был ранее определен.Вы можете иметь отдельные файлы для ваших фильтров, так как рекомендуется иметь отдельные файлы для ваших контроллеров, служб и т. Д.

Cheers!