使用ng-repeat-start和ng-repeat-end导致过滤器被无限调用

时间:2015-07-14 17:27:40

标签: javascript angularjs

过滤器和模板的片段如下所示。我无法弄清楚为什么控制台会无数次地出现。

angular.module.filter('sumArrayAttrsFilter', function() {
    return function(sample, propName) {
        console.debug('cp$$$$$$$$$S1::', sample, '::', propName);
        return 99990;
    };
});             
         <table>
            <tbody>
                <tr ng-repeat-start="(key, finData) in {'2014': [{'test': 4}, {'test2': 5}], '2015': [{'test': 4}, {'test2': 5}]} track by key">
                    <td>
                        <div>
                            {{key}}:: {{finData | sumArrayAttrsFilter:'test'}}
                        </div>
                    </td>
                </tr>
                <tr ng-repeat-end>
                    <td>
                        <div>
                            {{key}}:: {{finData | sumArrayAttrsFilter:'test2'}}
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

1 个答案:

答案 0 :(得分:1)

似乎对我有用。试试这种方式。

<div class="col-sm-3 col-xs-6">
     A
</div>
<div class="col-sm-3 col-xs-6 col-sm-push-6">
     B
</div>
<div class="col-sm-2 col-xs-4 col-sm-pull-3">
     C
</div>

HTML

var app = angular.module('myApp', []);
app.filter('sumArrayAttrsFilter', function() {
return function(sample, propName) {
    console.debug('cp$$$$$$$$$S1::', sample, '::', propName);
    return 99990;
};

中对myApp模块的引用
<div ng-app="myApp">
    <table>
        <tbody>
            <tr ng-repeat-start="(key, finData) in {'2014': [{'test': 4}, {'test2': 5}], '2015': [{'test': 4}, {'test2': 5}]} track by key">
                <td>
                    <div>
                        {{key}}:: {{finData | sumArrayAttrsFilter:'test'}}
                    </div>
                </td>
            </tr>
            <tr ng-repeat-end>
                <td>
                    <div>
                        {{key}}:: {{finData | sumArrayAttrsFilter:'test2'}}
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
  </div>

使用您的模块引导应用程序。

这是链接[link] http://plnkr.co/edit/1TQsn2NujRB1ojuurVOd?p=preview