我有一個角度變量,其值爲[170,1,130,3,134,4 ....等等]。我想以表格的形式顯示它,例如出現在兩列的表格中。一列中的所有偶數位置值和另一列中的所有奇數位置值。根據它們的位置在表格中顯示角度變量值
col1 col2
170 1
130 3
134 4
我寫了下面的代碼,但它顯示了單列中的所有代碼。 PLZ。
Col1
170
1
130
...
...
我有一個角度變量,其值爲[170,1,130,3,134,4 ....等等]。我想以表格的形式顯示它,例如出現在兩列的表格中。一列中的所有偶數位置值和另一列中的所有奇數位置值。根據它們的位置在表格中顯示角度變量值
col1 col2
170 1
130 3
134 4
我寫了下面的代碼,但它顯示了單列中的所有代碼。 PLZ。
Col1
170
1
130
...
...
不要在td
使用ngSwitchWhen
:提前
<table class="table">
<tr ng-repeat="item in output track by $index" ng-switch="$even" ng-class-even="'even'" ng-class-odd="'odd'">
<td ng-switch-when="true">{{item}}</td>
<td ng-switch-default>{{item}}</td>
</tr>
這dispplaying所有在一列中,比如建議一個solution.Thanks。相反,使用div
內td
這樣的:
<td>
<div ng-switch-when="true">{{item}}</div>
</td>
<td>
<div ng-switch-default>{{item}}</div>
</td>
這將保證兩列。你可以做的另一件事是設置td
的width
爲相同大小的列。
您可以使用「模量%」來獲取偶數和奇數並相應地打印。寫你的表達中的「NG-開關」和校驗值就像下面的例子:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<span ng-repeat="obj in items">
<div ng-switch on="{{obj%2}}">
<div ng-switch-when="1">Odd: {{obj}}</div>
<div ng-switch-when="0">Even: {{obj}}</div>
</div>
<div></div>
</div>
</span>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.items = [12,11,34,33,54];
});
</script>
</body>
</html>
你可以做到這一點通過重新解析在奇一偶數值數組:
JS:
var app = angular.module("app", []);
app.controller('dummy', function($scope, $location) {
var output = [170, 1, 130, 3, 134, 4], odd = [], even = [];
for (var i = 0; i < output.length; i++) {
if ((i + 2) % 2 == 0) {
odd.push(output[i]);
} else {
even.push(output[i]);
}
}
$scope.output = {odd: odd, even: even};
});
HTML:
<div ng-app="app" ng-controller="dummy">
<table>
<tr ng-repeat="odd in output.odd track by $index">
<td>{{odd}}</td>
<td>{{output.even[$index]}}</td>
</tr>
</table>
</div>