ng-repeat über ein Array von Objekten (mit ng-start)

Ich habe ein Array von Objekten, die ich anzeigen möchte. Das Problem ist, dass ich nur auf die Daten zugreifen kann, indem ich sie über ihren Eigenschaftsnamen aufrufe. Ich möchte mit dem Schlüssel des Objekts durchlaufen werden.ng-repeat über ein Array von Objekten (mit ng-start)

Das Objekt hat zwei Eigenschaften und jede Eigenschaft repräsentiert eine Startzeit und eine Endzeit. Sie sollen in jeder Zelle angezeigt werden.

Meine Tabelle ist wie folgt strukturiert:

<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 diesem Fall, wie kann ich dynamisch auf das Objekt zugreifen?

Mein 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); 
    }); 


})

Werde ich das richtig oder gibt es einen besseren Weg, um meine Datenstruktur zu arrangieren?

Quelle

2016-05-13 o6t9o

Iterate über die (key,value) in ng-repeat in Winkel:

Lesen Sie mehr über ng-repeat:

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

In Ihrem Fall, aktualisieren Sie Ihre HTML Wo:

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

Quelle

2016-05-13 01:56:27

Vielen Dank. Lektion gelernt ist, die Dokumentation mehr zu konsultieren. – o6t9o

ng-repeat über ein Array von Objekten (mit ng-start)

Antwort

Verwandte Themen