ng-repeat over an array of objects (using ng-start)

Question

I have an array of objects that I am trying to display. The problem is that I can only access the data by calling it by it's property name. I would like to be to iterate through using the object's key.

The object has two properties and each property represents a start time and an end time. They're to be displayed in each cell.

My table is structured like this:

<table class="table table-striped">
    <tr>
      <th></th>
      <th ng-repeat="department in departments" style="vertical-align:top" colspan="2">{{department}}</th>
    </tr>
    <tr ng-repeat="time in times">
      <td>{{weekdays[$index]}}</td>
      <td ng-repeat-start="dept in time">{{times[$index].service.start}}</td>
      <td ng-repeat-end>{{times[$index].service.end}}</td>
    </tr>
</table>

In this case, how can I dynamically access the object?

My controller:

.controller("businessHours", function($scope) {
  $scope.weekdays = ["Sunday", "Monday", "Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
  $scope.departments = ["sales", "service","accounting","bodyshop","other","parts"];

  $scope.times = [];
  $.each($scope.weekdays, function(index, value) {
    var dayTimes = {};
    $.each($scope.departments, function(index2, value){
        console.log(index)
      dayTimes[value] = {start: '5', end: '6'};
    });
    $scope.times.push(dayTimes);
  });


})

Am I going about this correctly or is there a better way to arrange my data structure?

Yin Gang · Accepted Answer · 2016-05-13 01:56:27Z

Iterate over the (key,value) in ng-repeat in angular:

Read more about ng-repeat:

<div ng-repeat="(key, value) in myObj"> ... </div>,

In your case, update your html where:

<td ng-repeat-start="(key,dept) in time">{{times[$index][key].start}}</td>
<td ng-repeat-end>{{times[$index][key].end}}</td>

angular.module('app', [])
  .controller('homeCtrl', function($scope) {
    $scope.weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
    $scope.departments = ["sales", "service", "accounting", "bodyshop", "other", "parts"];

    $scope.times = [];
    angular.forEach($scope.weekdays, function(v, i) {
      var dayTimes = {};
      angular.forEach($scope.departments, function(value, index) {
        console.log(index)
        dayTimes[value] = {
          start: '5',
          end: '6'
        };
      });
      $scope.times.push(dayTimes);
    });
  console.info($scope.times);
  });

td,tr {
  text-align:center;
  min-width: 20px;
}

<html>

<head>
  <title>Single Demo</title>
  <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
  <script src="//cdn.bootcss.com/angular.js/1.4.7/angular.js"></script>

</head>

<body ng-app="app" ng-controller="homeCtrl">
  <div class="container">
    <table class="table table-striped">
      <tr>
        <th></th>
        <th ng-repeat="department in departments" style="vertical-align:top" colspan="2">{{department}}</th>
      </tr>
      <tr ng-repeat="time in times">
        <td>{{weekdays[$index]}}</td>
        <td ng-repeat-start="(key,dept) in time">{{times[$index][key].start}}</td>
        <td ng-repeat-end>{{times[$index][key].end}}</td>
      </tr>
    </table>
  </div>
</body>

</html>

Much thanks. Lesson learned is to consult the documentation more.

Collectives™ on Stack Overflow

ng-repeat over an array of objects (using ng-start)

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related