definieren ng-Modell für diese Eingangs JSON array - AngularJS

Question

Ziel: I mit dieser Struktur diese Daten zugewiesen sind:

"open_hours": [ // (See that open_hours is an array). 
     { 
     "weekday": "mon", 
     "opens_at": "09:00", 
     "closes_at": "22:00" 
     }, 
     { 
     "weekday": "tue", 
     "opens_at": "09:00", 
     "closes_at": "22:00" 
     } 
    ] 

in diese controller.js:

$scope.days = ["sun","mon","tue","wed","thu","fri","sat"]; 

$scope.restaurant = {}; 
$scope.restaurant.open_hours = []; 

Um in diesem Vorlage (angular-bootstrap-ui timePicker Richtlinie) angesehen werden:

<div class="row"> 
     <div class="col-lg-12"> 
     <table class="table table-striped table-hover table-condensed"> 
      <tbody ng-repeat="day in days"> 
      <tr> 
       <td> 
       <input type="hidden" ng-model="restaurant.open_hours[day].weekday" ng-value="day"/> 
       {{day}} 
       </td> 
       <td> 
       Opens at <uib-timepicker ng-model="restaurant.open_hours[day].opens_at" show-meridian="false" show-spinners="false" minute-step="15"></uib-timepicker> 
       </td> 
       <td> 
       Closes at <uib-timepicker ng-model="restaurant.open_hours[day].closes_at" show-meridian="false" show-spinners="false" minute-step="15"></uib-timepicker> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 

Wie geht das? Bei all meinen Versuchen ist mir das nicht gelungen.

Answer 1

Sie benötigen das a date-Objekt, um den Zeitzähler zu füllen.

var time = new Date(); 
    time.setHours(9); 
    time.setMinutes(0); 
    var closeTime = new Date(); 
    closeTime.setHours(22); 
    closeTime.setMinutes(0); 
    $scope.restaurant = { 
    "open_hours": [ 
    { 
    "weekday": "mon", 
    "opens_at": time, 
    "closes_at": closeTime 
    }, 
    { 
    "weekday": "tue", 
    "opens_at": time, 
    "closes_at": closeTime 
    } 
]}; 

hier ist ein codepen, die ein Arbeitsbeispiel zeigt.