Question

我正在尝试将我的数组显示为每行两列，有角度指令可能吗？或者我必须在控制器中写一些逻辑。

控制器：

//don't know if i have to put some logic here

型号：

$scope.fruits = ['apple', 'banana', 'grapes', 'lemon']

查看：

<div class="row" ng-repeat="fruit in fruits">
  <div class="col">{{fruits}}</div>
</div>

我正在使用离子框架

Answer 1

你可以简单地使用bootstrap col类，只需将两个元素放在单行上，将其分成50％和50％作为12列的计算。

<强>标记

<div class="row" ng-repeat="fruit in fruits">
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">{{fruit}}</div>
</div>

Answer 2

使用您提供的代码中的类名，我假设您正在使用Bootstrap。如果您想要每行2列，只需使用col-md-6：

使每列的宽度为50％

<div class="row" ng-repeat="fruit in fruits">
  <div class="col-md-6">{{fruit}}</div>
</div>

Answer 3

如果我没错，你想在表格视图中显示数据，每列都有不同的数据。只需根据需要以json格式创建数据。

 $scope.stock=[{name:"shocks",qty:"4"},{name:"shoes",qty:"4"}]

从使用上面的范围，你可以通过简单的JavaScript表属性将它绑定在不同属性的两列中。

<div ng-repeat="node in stock">`{{node.name}} 
{{node.qty}}`

Answer 4

有一种方法可以达到所需的方式，但并非所有

都推荐

<table class='table table-bordered'>
    <tbody ng-repeat="(k,v) in fruits">
        <tr ng-if='$even'>
            <td>{{fruits[k]}}</td>
            <td>{{fruits[k+1]}}</td>
        </tr>
    </tbody>    
</table>

http://jsbin.com/hukumi/edit?html,js,output

Answer 5

我认为，您可以通过修改初始数组来创建中间JSON数组来解决。

function MyCtrl($scope) {
   $scope.fruits = ['apple', 'banana', 'grapes', 'lemon'];
   $scope.temp = [];
   while ($scope.fruits.length) {
            $scope.temp.push($scope.fruits.splice(0, 2))
   }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div   ng-app ng-controller="MyCtrl">
   <table class='table table-bordered'>
        <tbody ng-repeat="fruit in temp">
            <tr >
                <td>{{fruit[0]}} </td>
                <td>{{fruit[1]}}</td>
            </tr>
        </tbody>
    </table>
</div>

如何在网格中使用ng-repeat

5 个答案: