Question

我正在使用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看起来像下面的图像。

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

如何在bootstrap css中动态显示上面的图像用于替代行

Answer 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窗口的大小以正确查看布局。

Answer 2

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

Answer 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>

显示按钮使用ng-repeat的特定格式

3 个答案: