Кнопки отображения в определенном формате с использованием ng-repeat

Question

Я использую angularjs и bootstrap3.У меня есть массив массивов объектов, и мне нужно отобразить его в пользовательском интерфейсе, как показано ниже,

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>

Из приведенного выше кода,Пользовательский интерфейс выглядит как на картинке ниже.

Но я хочу показать пользовательский интерфейс, как показано на рисунке ниже, и 3 кнопки в строке

Как динамически отображать интерфейс, подобный изображению выше, в начальной загрузке 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

В угловых 1 нг-повтор был использован.Но в 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>

Answer 3

старайтесь, чтобы текст для содержимого был разным (некоторые длиннее, некоторые намного длиннее) для каждой кнопки.Это должно быть продлено, так как класс ".btn" css содержит {display: inline-block}.Затем убедитесь, что вокруг этих кнопок есть оболочка, и сделайте их {text-align: center}