CODEWITHSUNDEEP
javascriptangularjsfilter
Dariux
Dariux

Reputation: 4253

angular search filter - unknown provider

main.js

var myApp = angular.module('myApp', []);

myApp.factory('Avengers', function () {
  var Avengers = {};
  Avengers.cast = [
    {
      name: 'Darius',
      character: 'Darevicius'
    }

  ];
  return Avengers;
});

function AvengersCtrl($scope, Avengers) {
  $scope.avengers = Avengers;
}

index.html

<div ng-app="myApp">

<head>
    <script src="http://code.angularjs.org/1.2.11/angular.min.js"></script>
    <script src="main.js"></script>
  </head>

<div ng-controller="AvengersCtrl">
     <input type="text" ng-model="searchText">
    <table>
      <tr ng-repeat="actor in avengers.cast | searchText ">
        <td>{{ actor.name }}</td>
        <td>{{ actor.character }}</td>
      </tr>
    </table>
  </div>

</div>

I get this error:

http://docs.angularjs.org/error/$injector:unpr?p0=searchTextFilterProvider

and dont understand why it does not work. It is native angular filter and what dependency it needs? WHen I remover pipe character and filter, the list is printed and no errors. So it looks that it knows all dependencies.

This is by example from there:

http://www.thinkster.io/pick/ET1iee6rnm/angularjs-ngfilter

Upvotes: 0

Views: 5545

Answers (2)

Damiya
Damiya

Reputation: 834

Change:

<tr ng-repeat="actor in avengers.cast | searchText ">

to

<tr ng-repeat="actor in avengers.cast | filter:searchText ">

Angular is attempting to look up a provider and apply it to the ng-repeat; since there's no searchTextProvider, this fails. There is, however, a filter provider.

Upvotes: 2

Niklas
Niklas

Reputation: 13155

Try changing this line

<tr ng-repeat="actor in avengers.cast | filter:searchText ">

According to the docs you need to specify filter: before.

Upvotes: 2

Related Questions