Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm trying to create an index of shops, showing them grouped by category, so i have two ng-repeat, one for the categories and another for the shops

i have an array for the categories (['cat1', 'cat2', ..])

and another with the shops ([{name: 'shop1', categories: ['cat2', 'cat3']}, ..])

Here's the HTML Code for the repeaters:

<div ng-repeat="categoria in categorias | filter:categorySearch:strict">
    <h3>{{categoria}}</h3>
    <hr width="70%" align="left">
    <table style="text-align: center;" class="col-xs-12 col-sm-12 col-md-12 table table-bordered table-striped" class="tabla_tiendas">
    <tr ng-repeat="tienda in tiendas | filter:{agregada: 'false'} | filterByCategory:categoria:tienda" >
        <td class="col-xs-4 col-sm-4 col-md-4 tienda-{{tienda.seleccionada}}"><input type="checkbox" ng-change="setPosition(tienda, tienda.seleccionada)" ng-model="tienda.seleccionada" value="{{tienda.id}}"></td>
        <td class="col-xs-4 col-sm-4 col-md-4 tienda-{{tienda.seleccionada}}">{{tienda.nombre}}</td>
        <td class="col-xs-4 col-sm-4 col-md-4 tienda-{{tienda.seleccionada}}">{{tienda.categorias}}</td>
    </tr>
    </table>
</div>

Here's the Angular Code:

app.filter('filterByCategory', function(tienda, categoria){
    return function(tienda, categoria){return _.contains(tienda.categorias, categoria);};
});

And finally here are the errors:

Error: Circular dependency: 
    at Error (<anonymous>)
    at Object.c [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:26:368)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:108:41
    at l (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:70:141)
    at Oc.fa (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:74:463)
    at k (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:69:505)
    at Oc (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:75:29)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:78:241
    at Object.e.$watchCollection (http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:88:58)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js:156:40 <!-- ngRepeat: tienda in tiendas | filter:{agregada: 'false'} | filterByCategory:categoria:tienda --> angular.min.js:63
(anonymous function) angular.min.js:63
(anonymous function) angular.min.js:53
l angular.min.js:44
e angular.min.js:39
e angular.min.js:39
e angular.min.js:39
e angular.min.js:39
(anonymous function) angular.min.js:38
(anonymous function) angular.min.js:157
(anonymous function) angular.min.js:89
e.$digest angular.min.js:89
e.$apply angular.min.js:91
(anonymous function) angular.min.js:152
(anonymous function) angular.min.js:23
o angular.min.js:6
c

What is causing the circular dependency and how can i break it? i'm also open to another solution, but it can change the data architecture

Edit:

Here i have a jsFiddle with the problem: http://jsfiddle.net/truca/HB7LU/1458/ (if i use the filter "filterByCategory" i get the circular dependency, if i use the filter "filterByCategoryScope" i dont get the parameter category, so i can't filter)

share|improve this question
 
Can you post tienda model also? –  Maxim Shoustin Dec 24 '13 at 21:05
 
tienda is a shop, so it's model is: {name: 'shop1', categories: ['cat2', 'cat3']} –  Truca Dec 24 '13 at 21:31
 
if you temporarily use the normal angular.js instead of angular.min.js and use non-minified versions of your script, you will find it easier to identify which variables are which in the error. –  Andrew Counts Dec 24 '13 at 21:52
add comment

2 Answers

up vote 0 down vote

Your filter factory is invalid.

Angular filters are defined in following signature:

app.filter('filterName', function(/*optional injectables*/){
  return function(item, param1, param2, ...){
    //some filter-specific calculations...
    return true/false
  }
});

and are used in view expressions with following syntax:

ng-repeat="item in items | filterName:param1:param2"

Your filter is improperly defined as:

app.filter('filterByCategory', function(tienda, categoria){
    return function(tienda, categoria){
      return _.contains(tienda.categorias, categoria);
    };
});

Because of the mix up between the filter factory and the actual filter function, you have instructed Angular to find and inject tienda and categoria dependencies, but these do not exist as such.

So, the correct filter signature is:

myApp.filter('filterByCategory', function(){
    return function(shop, categoria){
        return _.contains(shop.categorias, categoria);
    };
});

and usage:

ng-repeat="shop in shops | filterByCategory:categoria"
share|improve this answer
 
Thak you very much! you helped me a lot guiding me to find the solution! –  Truca Dec 25 '13 at 7:41
add comment
up vote 0 down vote

Got it solved, thank you very much to all of you

Here's the final result into jsFiddle:

http://jsfiddle.net/truca/HB7LU/1460/

HTML: {{category}} {{shop.name}}

Filter:

myApp.filter('filterByCategory', function () {
    return function (shops, category) {
        return _.filter(shops, function(shop){
            return _.contains(shop.categories, category)
        });
    };
});
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.