css - ionic 中带有 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

 .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 是您的 Controller ，您在其中放置了诸如 viewBadgeDetail 之类的功能以供使用，但随后您使用了 badgesCtrl第一个 ng-repeat 就像是一个集合。您是说 ng-repeat="row in badgesCtrl.rows" 吗？似乎您还应该在第二个 ng-repeat 中引用 row.badges 而不是 badgesCtrl.badges。

通过这种方式，您可以遍历 行 的集合，然后每个 行 都有它自己的 行 唯一的徽章集合。

首先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: [] };
  }
});