离子中具有 ng-repeat 的列没有分成行

Question

我遇到的主要问题仅与我的代码无法在多行 3 列中显示徽章而不在每行中重复相同的徽章有关。即使我识别出 col-33，徽章仍出现在行中（以 33% 均匀间隔）超过页面的整个宽度；它们溢出页面！我尝试设置 max-width 无济于事。请，任何建议都会很棒，这里是代码：

  <ion-content class="badge-bg">
    <div class="row" ng-repeat="row in badgesCtrl">
      <div class="col-33" ng-show="badge.images[0].url" ng-repeat="badge in badgesCtrl.badges ">
        <img ng-click="badgesCtrl.viewBadgeDetail(badge)"
             alt="" src="{{badge.images[0].url}}" alt="color" />
      </div>
    </div>
  </ion-content>

控制器

 .controller('BadgesCtrl', ['$location', '$routeParams', '$scope', '$state', '$ionicPopover', 'BadgesService',
function($location, $routeParams, $scope, $state, $ionicPopover, BadgesService) {
  $ionicPopover.fromTemplateUrl('templates/popover.html', {
    scope: $scope,
  }).then(function(popover) {
    $scope.popover = popover;
  });

  badgesCtrl = this;
  $scope.search = {};
  $scope.search.searchText = '';

  // Initialize badges Data
  BadgesService.getBadges().success(function(badges) {
    badgesCtrl.badges = badges;
  });

  BadgesService.getBadge($routeParams.badgeId).success(function(badge){
    badgesCtrl.badge = badge;
  });

  badgesCtrl.viewBadgeDetail = function(badge) {
    $location.path('/tab/badges/' + badge._id);
  };
}]);

Answer 1

看起来badgesCtrl 是您的控制器，您在其中放置了viewBadgeDetail 之类的功能以供使用，但随后您在第一个ng-repeat 中使用badgesCtrl，就像它是一个集合一样。你的意思是ng-repeat="row in badgesCtrl.rows"？似乎您还应该在第二个 ng-repeat 中引用 row.badges 而不是 badgesCtrl.badges。

这样，您将遍历rows 的集合，然后每个row 都有自己的row 独有的徽章集合。

第一ng-repeat：

<div class="row" ng-repeat="row in badgesCtrl.rows">

第二个ng-repeat：

<div class="col-33" ng-show="badge.images[0].url" ng-repeat="badge in row.badges">

---

如果您有一系列徽章，请在 badgesCtrl.badges 说，并且您希望将其分开，以便像我上面的那样工作，然后试试这个：

badgesCtrl.rows = [];
var count = 0;
var currentRow = { badges: [] };
badgesCtrl.badges.forEach(function (badge, index) {
  currentRow.badges.push(badge);
  count++;
  // If count is 3 or we are at the end of the badges collection
  // then push our current row and start counting again.
  if (count === 3 || index === badgesCtrl.badges.length - 1) {
    badgesCtrl.rows.push(currentRow);
    count = 0;
    currentRow = { badges: [] };
  }
});