2016-03-22 42 views
0

我有一個角度變量,其值爲[170,1,130,3,134,4 ....等等]。我想以表格的形式顯示它,例如出現在兩列的表格中。一列中的所有偶數位置值和另一列中的所有奇數位置值。根據它們的位置在表格中顯示角度變量值

col1 col2 
170  1 
130  3 
134  4 

我寫了下面的代碼,但它顯示了單列中的所有代碼。 PLZ。

Col1 
170 
1 
130 
... 
... 

回答

0

不要在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。相反,使用divtd這樣的:

<td> 
    <div ng-switch-when="true">{{item}}</div> 
</td> 
<td> 
    <div ng-switch-default>{{item}}</div> 
</td> 

這將保證兩列。你可以做的另一件事是設置tdwidth爲相同大小的列。

0

您可以使用「模量%」來獲取偶數和奇數並相應地打印。寫你的表達中的「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> 

這裏是提琴:http://jsfiddle.net/Lvc0u55v/1391/

0

你可以做到這一點通過重新解析在奇一偶數值數組:

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> 

JSFiddle

相關問題