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> {{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 -->
控制器 这在控制器中,我把我的过滤器。
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)