ng-repeat在3个不同的div中

时间:2017-06-14 10:39:07

标签: html angularjs

我在这个div里面有一个带有bootstrap class col 12的div我有3个带有bootstrap class col 4的div。 现在我从我的数据库中获取一系列美食。

我想使用ng-repeat显示3种不同div(不重复)中的美食: 数据回复:

cuisine1 
cuisine2
cuisine3
cuisine4 etc..

在我的页面中,我想向他们展示:

cuisine1               cuisine3            cuisine5
cuisine2               cuisine4            cuisine5

任何帮助?我怎么能用1 ng-repeat

来做到这一点

1 个答案:

答案 0 :(得分:1)

这可能会对你有所帮助。您的案例会根据您的要求显示更多详细信息。

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>

希望有所帮助:)