オブジェクトの配列に対するng-repeat（ng-startを使用）

私は表示しようとしているオブジェクトの配列を持っています。問題は、プロパティ名で呼び出すだけでデータにアクセスできることです。オブジェクトのキーを使用して反復処理を行いたいと思います。オブジェクトの配列に対するng-repeat（ng-startを使用）

オブジェクトには2つのプロパティがあり、各プロパティは開始時刻と終了時刻を表します。それらは各セルに表示されます。私は動的にオブジェクトにアクセスする方法を、ここでは

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

：

私のテーブルは、このように構成されていますか？

マイコントローラ：

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


})

私は正しくこのついて行くか、自分のデータ構造を配置する良い方法はありますかな？

出典

2016-05-13 o6t9o

反復オーバー(key,value) in ng-repeat角度に：あなたのケースでは

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

は、あなたのhtmlを更新場所：

読むよりおよそng-repeat

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

出典

2016-05-13 01:56:27

本当にありがとうございました。レッスンでは、より多くのドキュメントを参照することを学びました。 – o6t9o

オブジェクトの配列に対するng-repeat（ng-startを使用）

答えて

関連する問題