Error in console
For the preference purpose
Error: [$rootScope:infdig] errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=[[{"ms…22%3A"http%3A%2F%2Fkbs-test.com%2Fimages%2Fpages%2Fimg13.jpg"}]]
at Error (native)
at 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)
at 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)
at 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)
at 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)
at 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)
at 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)
HTML Code This is used for display images in grid.
I used this link – http://codepen.io/pulkitsinghal/pen/JjmED/
In this i used 5 ng-repeat tags but i got errors on filter ng-repeat=“row in 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> {{group.menu_name}}
<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 -->
Controller
This in controller where i put my filter.
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;
};
});