如何在多个ng-repeat中使用过滤器?

时间:2015-10-03 06:56:24

标签: angularjs ionic-framework ng-repeat angularjs-filter

HTML代码这用于在网格中显示图像。  我使用了这个链接 - http://codepen.io/pulkitsinghal/pen/JjmED/

在这里我使用了5 ng-repeat标签,但我在过滤器 ng-repeat =“f.images | inSlicesOf:2中的行

中出错了
    <div class="list itemnew card" ng-repeat="group in groups">
                        <ion-item class="item item-icon-right" ng-click="toggleGroup(group)" ng-class="{active: isGroupShown(group)}" style="">
                            <i class="ion-chevron-right pull-right" ng-class="isGroupShown(group) ? 'ion-chevron-down' : 'ion-chevron-right'" style="float:right;"><input type="hidden" ng-model="group.menu_name"></i> &nbsp; {{group.menu_name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                            <div ng-switch on="group.menuid">                          

                                <!--Facilitites-->
                                 <div ng-switch-when="8">
                                    <ion-item class="item-accordion item ng-binding ng-hide " ng-show="isGroupShown(group)" style="">
                                        <div class="item bdr-none blue-light" style="margin-top:25px !important;">
                                            <div ng-repeat="facility in group.facilities">
                                                <div ng-repeat="f in facility">
                                                    <h2 class="padding-left">{{f.facilities_name}}</h2>
                                                    <div class="row" ng-repeat="row in f.images | inSlicesOf:2">
                                                        <div class="col col-50" ng-repeat="item in row">
                                                            <img src="{{item.img_name}}" class="col col-30" ng-click="showImage('{{item.img_name}}')" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </ion-item>
                                </div>



                            </div><!--Switch-->
                        </ion-item>
                    </div>
                    <!-- end ngRepeat: item in group.items -->

控制器 这在控制器中,我把我的过滤器。

var app = angular.module('test', ['ionic']);
app.filter('inSlicesOf', ['$rootScope',
  function ($rootScope) {
        makeSlices = function (items, count) {
            if (!count)
                count = 3;

            if (!angular.isArray(items) && !angular.isString(items)) return items;

            var array = [];
            for (var i = 0; i < items.length; i++) {
                var chunkIndex = parseInt(i / count, 10);
                var isFirst = (i % count === 0);
                if (isFirst)
                    array[chunkIndex] = [];
                array[chunkIndex].push(items[i]);
            }

            if (angular.equals($rootScope.arrayinSliceOf, array))
                return $rootScope.arrayinSliceOf;
            else
                $rootScope.arrayinSliceOf = array;

            return array;
        };

        return makeSlices;
  }]);

  app.controller('AboutUsCtrl', function ($scope, $http, $ionicModal) {
    $scope.groups = [];

    if (window.localStorage.getItem("about") !== null) {
        if (window.localStorage.getItem("about") !== "undefined") {
            $scope.groups = JSON.parse(window.localStorage.getItem("about"));
        }
    }

    $http.post("json")
        .success(function (response) {
            if (response.about === undefined) {
                if (window.localStorage.getItem("about") !== "undefined") {
                    $scope.groups = JSON.parse(window.localStorage.getItem("about"));
                }
            } else {
                $scope.groups = response.about;
                window.localStorage.removeItem("about");
                window.localStorage.setItem("about", JSON.stringify(response.about));
            }

        }).error(function (data) {
            if (window.localStorage.getItem("about") !== "undefined") {
                $scope.groups = JSON.parse(window.localStorage.getItem("about"));
            }
        });

    $scope.toggleGroup = function (group) {
        if ($scope.isGroupShown(group)) {
            $scope.shownGroup = null;
        } else {
            $scope.shownGroup = group;
        }
    };

    $scope.isGroupShown = function (group) {
        return $scope.shownGroup === group;
    };

});

控制台错误 出于偏好目的

错误:[$ rootScope:infdig] errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms...22%3A%22http%3A%2F %2Fkbs-test.com%2Fimages%2Fpages%2Fimg13.jpg%22%7D%5D%5D     在错误(本机)     在127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/...-a621-2128fb7dbab1/platforms/ios/www/js/angular/ionic.bundle.min.js:37:416     at n。$ digest(127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/...-a621-2128fb7dbab1/platforms/ios/www/js/angular/ionic.bundle.min。 JS:164:96)     at n。$ apply(127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/...a621-2128fb7dbab1/platforms/ios/www/js/angular/ionic.bundle.min.js :166:269)     在HTMLBodyElement。 (127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/...a621-2128fb7dbab1/platforms/ios/www/js/angular/ionic.bundle.min.js:137:115)     在HTMLBodyElement.Gf.c(127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/...-a621-2128fb7dbab1/platforms/ios/www/js/angular/ionic.bundle.min的.js:66:217)     在N(127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/...-a621-2128fb7dbab1/platforms/ios/www/js/angular/ionic.bundle.min.js:22 :384)     在t(127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/...-a621-2128fb7dbab1/platforms/ios/www/js/angular/ionic.bundle.min.js:22 :216)     在HTMLDocument.l(127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/...a621-2128fb7dbab1/platforms/ios/www/js/angular/ionic.bundle.min.js: 22:1451)

0 个答案:

没有答案
相关问题