Afficher les boutons dans un certain format en utilisant ng-repeat

Question

J'utilise angularjs et bootstrap3. J'ai un tableau de tableaux d'objets et j'ai besoin de les afficher dans l'interface utilisateur comme ci-dessous,

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"
  }
]

mon code ng-repeat ressemble,

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

A partir du code ci-dessus, l'interface utilisateur ressemble à l'image ci-dessous.

Mais, je veux montrer l'interface utilisateur comme l'image ci-dessous et 3 boutons par ligne.

Comment afficher l'interface utilisateur comme l'image ci-dessus dans bootstrap css de manière dynamique pour les rangées alternatives également.

Answer 1

Vous pouvez utiliser list-inline pour cette mise en page : 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*/
}

Redimensionnez la fenêtre de jsfiddle pour voir la mise en page correctement.

Answer 2

Essayez de faire en sorte que le texte du contenu soit différent (certains sont plus longs, d'autres beaucoup plus longs) pour chacun des boutons. Il devrait être prolongé car la classe ".btn" css a {display : inline-block} en eux. Ensuite, assurez-vous qu'il y a une enveloppe autour de ces boutons et faites-les { text-align : center }.

Answer 3

Dans angular 1, on a utilisé ng-repeat. Mais dans ng-5 cette syntaxe a été changée avec ng-for. Je vous suggère d'utiliser le ng-for pour utiliser la boucle angulaire. Dans ce cas, votre code sera comme le suivant.

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