Question

我正在尝试创建商店索引，显示按类别分组，所以我有两个ng-repeat，一个用于类别，另一个用于商店

我有一个类别的数组（['cat1'，'cat2'，..]）

和另一家商店（[{name：'shop1'，categories：['cat2'，'cat3']}，..]）

以下是转发器的HTML代码：

<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>

这是Angular Code：

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

最后这里是错误：

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

导致循环依赖的原因是什么？我如何打破它？我也对另一种解决方案持开放态度，但它可以改变数据架构

修改：

这里我有一个问题的jsFiddle：http://jsfiddle.net/truca/HB7LU/1458/ （如果我使用过滤器“filterByCategory”我得到循环依赖，如果我使用过滤器“filterByCategoryScope”我没有得到参数类别，所以我不能过滤）

Answer 1

您的过滤器工厂无效。

角度过滤器在以下签名中定义：

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

并在视图表达式中使用，语法如下：

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

您的过滤器未正确定义为：

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

由于过滤器工厂和实际过滤器功能之间的混淆，您已指示Angular查找并注入tienda和categoria依赖项，但这些依赖项不存在。

因此，正确的过滤器签名是：

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

和用法：

ng-repeat="shop in shops | filterByCategory:categoria"

Answer 2

得到了解决，非常感谢你们所有人

这是jsFiddle的最终结果：

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

HTML： {{类别}} {{shop.name}}

过滤器：

myApp.filter('filterByCategory', function () {
    return function (shops, category) {
        return _.filter(shops, function(shop){
            return _.contains(shop.categories, category)
        });
    };
});

AngularJS具有循环依赖性的多参数过滤

2 个答案: