CODEWITHSUNDEEP
javascripthtmlangularjs
abhishek
abhishek

Reputation: 13

display angular variable values in table according to their position

I have a angular variable which has values are [ 170,1,130,3,134,4.... and so on].I want to display it in form such that the values appear in table in two columns for eg. all even position values in one column and all odd position values in other column. 

col1    col2
170     1
130     3
134     4

I have written the following code but it displays all code in a single column. Plz. suggest a solution.Thanks in advance

<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>

This is dispplaying the all in one column like:

Col1
 170
 1
 130
 ...
 ...

Upvotes: 0

Views: 1393

Answers (3)

Suresh Kamrushi
Suresh Kamrushi

Reputation: 16086

you can use "Modulus %" to get the even and odd number and print accordingly. Write your expression in "ng-switch" and check values like below example:

<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>

Here is fiddle: http://jsfiddle.net/Lvc0u55v/1391/

Upvotes: 0

michelem
michelem

Reputation: 14590

You can do that by re-parsing the array in odd an even values:

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

Upvotes: 0

Tarun Dugar
Tarun Dugar

Reputation: 8971

Dont use the ngSwitchWhen on td. Instead, use a div inside td like this:

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

This will guarantee two columns. One more thing you can do is set the width of both td for equally sized columns.

Upvotes: 0

Related Questions