search

Home  >  Q&A  >  body text

angular.js - angular1 running program error

1.angular//Error when running the program Error: [$injector:unpr] Unknown provider: uniqueFilterProvider <- uniqueFilter
2. Related code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<code><!DOCTYPE html>

<html lang="en" data-ng-app="sportsStore">

<head>

    <meta charset="UTF-8">

    <title>SportsStore</title>

    <script src="angular.js"></script>

    <link rel="stylesheet" href="bootstrap-theme.css">

    <link rel="stylesheet" href="bootstrap.css">

    <script>

        angular.module("sportsStore", ["customFilters"]);

    </script>

    <script src="controllers/sportsStore.js"></script>

    <script src="filters/customFilters.js"></script>

</head>

<body ng-controller="sportsStoreCtrl">

<p class="navbar navbar-inverse">

    <a href="#" class="navbar-brand">SportsStore</a>

</p>

<p class="panel panel-default row">

    <p class="col-xs-3">

        <a href="" ng-click="selectCategory()" class="btn btn-default btn-block btn-lg">Home</a>

        <a href="" ng-repeat="item in data.products | orderBy:'category' | unique:'category' "

           ng-click="selectCategory(item)"

           class="btn btn-block btn-default btn-lg">{{item}}</a>

    </p>

    <p class="col-xs-8">

        <p class="well" ng-repeat="item in data.products">

            <h3>

                <strong>{{item.name}}</strong>

                <span class="pull-right label label-primary">{{item.price|currency}}</span>

            </h3>

            <span class="lead">{{item.description}}</span>

        </p>

    </p>

</p>

</body>

</html>

</code>

customFilters.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<code>angular.module("customFilters",[])

.filter("unique", function () {

    return function (data,propertyName) {

        if(angular.isArray(data)&&angular.isString(propertyName)){

var results=[];

            var keys={};

            for (var i=0;i<data.length;i++){

                var val=data[i][propertyName];

                if(angular.isUndefined(keys[val])){

                    keys[val]=true;

                    results.push(val)

                }

            }

            return results;

        }else {

            return data;

        }

    }

})</code>

It should be a problem with the filter. I just started learning and can’t find out what’s wrong. 0 0 Where is the master?

某草草某草草2904 days ago800

reply all(2)I'll reply

  • 某草草

    某草草2017-05-15 17:14:17

    Does your sportsStore have dependency injection of customFilters?

    Or you can try changing customFilters to sportsStore first

    reply
    0
  • 我想大声告诉你

    我想大声告诉你2017-05-15 17:14:17

    1

    2

    3

    4

    <code><script>

        angular.module("sportsStore", ["customFilters"]);

    </script>

    <script src="controllers/sportsStore.js"></script></code>

    You create the sportsStore module first, and then introduce controllers/sportsStore.js later.
    In the sportsStore.js file, angular.module("customFilters",[])修改为angular.module("customFilters"), because the sportsStore module has already been created, there is no need to recreate it

    reply
    0
  • Cancelreply