angularjs - 如何实现带有中心内容栏的 AngularJS Google Images 样式行

Question

我有一个有 Angular 的应用程序，它有四个框，后面跟着一个滑动 div，它打开并显示来自上述框的信息。我第一次尝试

for (var i = 0; i < data.length; i++) {
  if(i % 4 == 0) components.push([]);
    components[components.length-1].push(data[i]);
  }
  return $scope.components = components;
});

我会使用嵌套的 ng-repeats 将 4 插入，然后将条放入，然后冲洗并重复。我可以使用 $parent 将信息推送到滑动的 div 中，然后行下方的栏将打开并填充。当我尝试使用这种方法进行过滤时，它会按行过滤掉，但会保持行数不变。所以我尝试使用带有开关盒的单个 ng-repeat 每 4 个添加一次。过滤现在可以工作，但范围确定滑动条是行中框的子项并使用 $parent。现在打开并填充所有滑动 div。

如果我没有很好地描述我正在尝试做的事情，请考虑谷歌图像和在图像行之间弹出的栏。除了不是每行有不同的数字，我总是有四个。

在使用我尝试的第一种方法之前，我可以从头开始制作自己的过滤器并将它们应用到 Controller 中，但我觉得必须有更简单的方法

Answer 1

我会将用于幻灯片的 ng-animate 留给您，但这里有一个基本指令，可以为您指明正确的方向。 (我没有测试这段代码，所以可能会有拼写错误。)请记住，如果你正在做 UI 组件，你想要使用指令。

module.directive('slidePanel', function() {
  return {
    restrict:'E',
    scope: {
      cards:'='
    },
    template:'<div>
        <div class="cardrow">
          <div ng-repeat="c in cards" class="card-panel">
            {{c.cardTitle}}
            <button ng-click="openCard(c)">Open</button>
            <!-- html for each card here ->
          </div>
        </div>
        <div class="carddetail" ng-show="activeCard">
            {{activeCard.title}}
            <!-- html for card detail here-->
        </div>
      </div>',
    link: function(scope,el,attrs) {
      scope.activeCard = null;
      scope.openCard = function(c) {
        scope.activeCard = c;
      }
    }

  }
});

<slide-panel cards='cardVariableFromMyController'></slide-panel>