отображать значения угловых переменных в таблице в соответствии с их положением

Question

отображать значения угловых переменных в таблице в соответствии с их положением

0

У меня есть угловая переменная, которая имеет значения [170,1,130,3,134,4.... и т.д.]. Я хочу отобразить ее в форме, чтобы значения отображались в таблице в двух столбцах, например. все четные значения позиции в одном столбце и все значения нечетной позиции в другом столбце.

col1    col2
170     1
130     3
134     4

Я написал следующий код, но он отображает весь код в одном столбце. Plz. предложите решение. Спасибо заранее

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

Это отображает все в одном столбце, например:

Col1
 170
 1
 130
 ...
 ...

abhishek 22 март 2016, в 08:08

Источник

Теги:

javascript

html

angularjs

3 ответа

Ещё вопросы

michelem · Answer 1 · 2016-03-22T06-21-00.000Z

Это можно сделать путем повторного разбора массива с нечетными четными значениями:

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

Tarun Dugar · Answer 2 · 2016-03-22T05-17-00.000Z

Не используйте ngSwitchWhen on td. Вместо этого используйте div внутри td следующим образом:

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

Это гарантирует два столбца. Еще одна вещь, которую вы можете сделать, - установить width обоих td для столбцов одинакового размера.

Suresh Kamrushi · Answer 3 · 2016-03-22T05-03-00.000Z

вы можете использовать "Modulus%" для получения четного и нечетного числа и печати соответствующим образом. Напишите свое выражение в "ng-switch" и проверьте значения, как показано ниже:

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