使用 ng-repeat 以特定格式显示按钮答案

【问题标题】：Display buttons In the certain format using ng-repeat使用 ng-repeat 以特定格式显示按钮
【发布时间】：2018-06-04 16:34:49
【问题描述】：

我正在使用 angularjs 和 bootstrap3。我有一组对象数组，我需要在 UI 中显示它，如下所示，

sample = [
  {
    "id": 12,
    "title": "title2",
    "description": "description2_for the second"
  },
  {
    "id": 13,
    "title": "title3",
    "description": "description3"
  },
  {
    "id": 17,
    "title": "title4",
    "description": "description4"
  },
  {
    "id": 18,
    "title": "title5",
    "description": "description5"
  },
  {
    "id": 19,
    "title": "title6",
    "description": "description6"
  },
  {
    "id": 20,
    "title": "title7",
    "description": "description7"
  },
  {
    "id": 21,
    "title": "title8",
    "description": "description8"
  },
  {
    "id": 22,
    "title": "title9",
    "description": "description9"
  }
]

我的代码 ng-repeat 看起来像，

<div class="editor-preview">
  <div class="row" >
    <div class="col-md-4 " ng-repeat-start="i in sample track by $index">
      <div class="tooltip"><button type="button" class="btn btn-primary btn-round-lg btn-lg">{{i.title}}</button>
        <span class="tooltiptext">{{i.description}}</span>
      </div>
    </div>
    <div class="clearfix" ng-if="($index+1)%3==0"></div>
    <div ng-repeat-end=""></div>
  </div>
</div>

根据上面的代码，用户界面如下图所示。

但是，我想显示如下图所示的 UI，每行 3 个按钮

如何在引导 css 中动态显示 UI，如上图所示的替代行

【问题讨论】：

你能提供一个关于 plunker 或类似的代码示例吗？
你想要代码示例吗？您需要 ng-repeat 中的内容是什么？
你可以做的是从主列表创建两个不同的列表，并在它们上应用不同的 css 类以获得不同的结果。
@Michael 为您创建了一个小小提琴。请在这里查看jsfiddle.net/mehbub/mnatc2b6/1
@Michael 更新小提琴jsfiddle.net/mehbub/mnatc2b6/3

标签： css angularjs twitter-bootstrap-3

【解决方案1】：

您可以在此布局中使用list-inline： http://jsfiddle.net/hstppbj8/804/

HTML：

<div ng-controller="sample">
  <div class="editor-preview-testimonials">
    <div class="row">
      <div class="col-xs-10">
        <ul class="list-inline text-center">
          <li ng-repeat="i in sample track by $index"><button class="btn btn-sm btn-primary">
     {{i.title}}<span class="tooltiptext"> {{i.description}}</span>
      </button></li>
        </ul>
      </div>
      <div class="clearfix" ng-if="($index+1)%3==0"></div>
      <div ng-repeat-end=""></div>
    </div>
  </div>
</div>

CSS：

ul li {
  margin: 4px 0; /*For spacing between li*/
}

调整 jsfiddle 窗口的大小以正确查看布局。

【讨论】：

但是，我应该每行显示 3 个按钮，即使它们是 8 个或 9 个
@user6250770 您可以为此使用 ng-switch。您将需要根据条件更改布局
请检查这个小提琴，你可以在这里添加sn-pjsfiddle.net/mehbub/mnatc2b6/1

【解决方案2】：

尝试让每个按钮的内容文本都不同（有些更长，有些更长）。它应该被延长，因为类“.btn”css 中有 {display: inline-block} 。然后确保这些按钮周围有一个包装器并使它们成为 { text-align: center }

【讨论】：

【解决方案3】：

在角度 1 ng-repeat 已被使用。但是在 ng-5 中，这个语法已经被 ng-for 改变了。我建议您使用 ng-for 来使用角度循环。在这种情况下，您的代码将如下所示。

<div ng-controller="sample">
  <div class="editor-preview-testimonials">
    <div class="row">
      <div class="col-xs-10">
        <ul class="list-inline text-center">
          <li *ngFor="let item of items; let i = index""><button class="btn btn-sm btn-primary">
    <span class="tooltiptext">  {{i}} {{description}}</span>
      </button></li>
        </ul>
      </div>
      <div class="clearfix" ng-if="($index+1)%3==0"></div>
    </div>
  </div>
</div>

【讨论】：

我只使用 angular 1.x