Как отобразить 2d массив в той же строке angularjs - PullRequest
0 голосов
/ 22 января 2020

js

$scope.arr = [{date: 24, day: 2, month: 11}
2: {date: 25, day: 3, month: 11}
3: {date: 26, day: 4, month: 11}];
<table>
    <tbody>
        <tr>
            <td ng-repeat="week in arr">
            <td class="hfixed" ng-repeat="i in week track by $index">{{DAYS[i.day]}}</br>{{ month[i.month] }} <br /> {{ i.date }}
            </td>
            </td>
        </tr>
        <tr ng-repeat="n in emp_arr track by $index">
            <td class="fixed ">{{ n.employee_name }} <br /> {{ n.employee_id }}</td>
            <td></td>
        </tr>
    </tbody>
</table>

ожидаемый результат

_____________________
| 24 |25 |26 |......|
_____________________
|    |   |   |      |

1 Ответ

0 голосов
/ 22 января 2020

Вы можете преобразовать массив в ожидаемый формат. Функция .map полезна. Оформить заказ ниже пример.

(function() {
  const app = angular.module('myApp', []);

  app.controller('MyController', ['$scope', ($scope) => {

    let arr = [{
        date: 24,
        day: 2,
        month: 11
      },
      {
        date: 25,
        day: 3,
        month: 11
      },
      {
        date: 26,
        day: 4,
        month: 11
      }
    ];

    $scope.newArr = [
      arr.map(a => a.date),
      arr.map(a => a.day),
      arr.map(a => a.month)
    ]
  }]);
})();
td {
  border-right: 2px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
  <table ng-controller="MyController">
    <tbody>
      <tr>
        <td>Date:</td>
        <td class="hfixed" ng-repeat="date in newArr[0] track by $index">
          {{date}}
        </td>
      </tr>
      <tr>
        <td>Days:</td>
        <td class="hfixed" ng-repeat="day in newArr[1] track by $index">
          {{day}}
        </td>
      </tr>
      <tr>
        <td>Months:</td>
        <td class="hfixed" ng-repeat="month in newArr[2] track by $index">
          {{month}}
        </td>
      </tr>
    </tbody>
  </table>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...