Question

我有一个Angular变量，其数值形式为[170,1,130,3,134,4 ....等等]。我希望以表格形式显示它，以便值在表格中以三列显示，例如。第一行的前三列中的前三个值，第二行的列中的后三个值，依此类推。

col1   col2   col3
 170   1     130
 3     134    4
 ................
 ................

我的代码

<span  ng-repeat="obj in items">
<div ng-switch on="{{obj%3}}"> 
   <div ng-switch-when="0">{{obj}}</div>
   <div ng-switch-when="1">{{obj}}</div>
   <div ng-switch-when="2">{{obj}}</div>
</div>

但是这段代码不起作用。任何建议都会有用。

提前致谢。

Answer 1

首先，您可以使用ng-switch覆盖由$index（https://docs.angularjs.org/api/ng/directive/ngRepeat）创建的隔离范围的ng-repeat属性。

其次，ng-switch正在处理表达式，请勿使用括号{{}}（https://docs.angularjs.org/api/ng/directive/ngSwitch）。

示例：

<span  ng-repeat="obj in items">
    <div ng-switch on="$index % 3"> 
       <div ng-switch-when="0">{{obj}}</div>
       <div ng-switch-when="1">{{obj}}</div>
       <div ng-switch-when="2">{{obj}}</div>
    </div>
</span>

Answer 2

将您的代码更改为

<div class="container"> 
  <div flex="30">Col-1</div>
  <div flex="30">Col-2</div>
  <div flex="30">Col-3</div>
</div>
<div class="container"> 
  <div flex="30" ng-repeat="obj in items">{{obj}}</div>
</div>

为.container

添加样式

.container{
  display: flex;
  flex-wrap: wrap;
}

在三个值的列中显示表中的角度变量值

2 个答案: