ng-repeat in 3 different divs

Question

I have a div with bootstrap class col 12 inside this div I have 3 divs with bootstrap class col 4. Now I'm getting from my database a list of cuisines.

I want to show the cuisines in the 3 different divs ( without repetition) using ng-repeat: data response:

cuisine1 
cuisine2
cuisine3
cuisine4 etc..

in my page i want to show them like:

cuisine1               cuisine3            cuisine5
cuisine2               cuisine4            cuisine5

any help ? how can i do that using 1 ng-repeat

Manish Manish · Accepted Answer · 2017-06-14T10:52:51

This might help you. You case display more details based on your requirements.

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.records = [
        "cuisine1",
        "cuisine2",
        "cuisine3",
        "cuisine4",
        "cuisine5"
    ]
});

.col-xs-4{
  border:1px solid black;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class="col-xs-4" ng-repeat="x in records"><h1>{{x}}</h1></div>
</div>

Hope it helps :)

ng-repeat in 3 different divs

1 Answers