angularjs - Accordion 的表布局调整

Question

我正在尝试在表格布局中显示 Accordion 。但是，在扩张之后，他们的阵型开始受到干扰。

我在这里尝试检查 Accordion 的表格布局 here .

<div ng-controller="AccordionDemoCtrl">
<label class="checkbox">
    <input type="checkbox" ng-model="oneAtATime" />Open only one at a time</label>
<accordion close-others="oneAtATime">
    <accordion-group  heading="Static Header">This content is straight in the template.</accordion-group>
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</accordion-group>
    <accordion-group heading="Dynamic Body Content">
        <p>The body of the accordion group grows to fit the contents</p>
        <button class="btn btn-small" ng-click="addItem()">Add Item</button>
        <div ng-repeat="item in items">{{item}}</div>
    </accordion-group>
</accordion>

点击第一个 Accordion 时，它会展开，但也会干扰底部的 Accordion 。给我的模型是:

Answer 1

Accordion 来自angular-ui-botstrap所以 bootstrap style 应该包含(并且已经包含)，所以您的解决方案是使用 bootstrap grid (使用行类和列类)

对于这个例子，我只使用 col-xs-4 来强制显示 fiddle 中的所有 3 列。

   <accordion close-others="oneAtATime">
       <div class="row">

         <div class="col-xs-4">
            <accordion-group heading="Static Header">This content is straight in the template.</accordion-group>
            <accordion-group heading="Static Header">This content is straight in the template.</accordion-group>
            <accordion-group heading="Static Header">This content is straight in the template.</accordion-group>
         </div>  

         <div class="col-xs-4">
            <accordion-group heading="Static Header">This content is straight in the template.</accordion-group>
            <accordion-group  heading="Static Header">This content is straight in the template.</accordion-group>
            <accordion-group heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</accordion-group>
        </div>

         <div class="col-xs-4">
              <accordion-group heading="Dynamic Body Content">
                <p>The body of the accordion group grows to fit the contents</p>
                <button class="btn btn-small" ng-click="addItem()">Add Item</button>
                <div ng-repeat="item in items">{{item}}</div>
              </accordion-group>
              <accordion-group  heading="Static Header">This content is straight in the template.</accordion-group>
              <accordion-group  heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</accordion-group>
        </div>

    </div>

http://jsfiddle.net/y03r5as2/1/

并删除 css 样式，你不需要那个。

注意:您可以关注bootstrap grid通过添加 col-sm- & col-md- 和 来根据您的需要调整文档col-lg- 也一样，每个大屏幕都有不同的外观。或者只有 col-xs-，如果你想为所有屏幕强制设置 3 列...

---

更新:从动态数据构建 Accordion

对于动态数据，它是一个数组，如:[item1, item2, ...]，最好的方法是在 Controller 中转换此数据。您只需将此数组划分为数组内的 3 个新数组，例如: [[item1,item2,...],[item6,...],[item9,...]]

这是一个分割数据的简单函数:

   function separateArray(arr, size) {
      var newArr = [];
      var colsLength = Math.ceil(arr.length/size);
      for (var i=0; i<arr.length; i+=colsLength) {
        newArr.push(arr.slice(i, i+colsLength));
      }
      return newArr;
    }

并像这样使用它:

$scope.transformedGroups = separateArray($scope.groups, 3);

它将您的数据分成 3 个数组:[[item1,item2,...], [item6,...], [item9, ...]]

现在您可以轻松拥有 3 列:

<div class="row">
    <accordion close-others="oneAtATime">
         <div class="col-xs-4" ng-repeat="rows in transformedGroups">
           <accordion-group heading="{{group.title}}"  ng-repeat="group in rows">{{group.content}}</accordion-group>
         </div>
   </accordion>
</div>

工作 fiddle :http://jsfiddle.net/mrev7gL7/1/