ng-repeat einen Block von html

Question

Ich habe zwei Eingabeformulare, Datum Um und Datum Von, die ich möchte wiederholen, mit ng-repeat. Gerade jetzt, es ist ein Block oh HTML-Text und ich bin mir nicht sicher, was ist die effizienteste Art, dies zu tun, außer alle div Elemente die Seite mit dem Plus-Symbol js.

ex. '<div class="container"> + bla bla + ...'

<div class="modal-body"> 
       <!--Time From--> 
       <div class="row"> 
        <div class="col-md-3 date-and-time-from" > 
         <label>Date/Time From</label> 
        </div> 
        <div class="col-md-9"> 
         <div class="form-group"> 
          <span class="date-field"> 
           <ms-date-time-picker ng-model="newResource.booking[0].startDateTime" placeholder="From"></ms-date-time-picker> 
          </span> 
         </div> 
        </div> 
       </div> 

       <!--Time To--> 
       <div class="row"> 
        <div class="col-md-3 date-and-time-to" > 
         <label>Date/Time To</label> 
        </div> 
        <div class="col-md-9"> 
         <div class="form-group"> 
          <span class="date-field"> 
           <ms-date-time-picker ng-model="newResource.booking[0].endDateTime" placeholder="To" ></ms-date-time-picker> 
          </span> 
         </div> 
        </div> 
       </div> 
      </div> 

Das Ziel meiner Anwendung ist, dass ein Benutzer wählt, wie viele Buchungen er in seiner Anordnung in dem ersten modal gespeichert werden. Dann klickt er auf eine Schaltfläche und der obige HTML-Text erscheint im zweiten Modal. Basierend auf der Anzahl der Buchungen, die der Benutzer wählt (sagen wir 3), wird der obige HTML-Code dreimal in einem Modal wiederholt (es gibt 3 Datumsformulare in einer vertikalen Liste).

Irgendwelche Vorschläge würden geschätzt!

Answer 1

Es ist einfach ng-Wiederholung verwenden nur durch the documentation here gehen. Ich sehe, dass Sie divs in Ihrer Frage anhängen wie:

htmlString ='<div id="1">Bla</div>'+'<div id="2">Bla</div>'; 

ngRepeat directive wird auf der HTML selbst verwendet werden. Wie folgt aus:

arrayOfItems = [1,2,3]; //in your controller 
<!-- in your html --> 
<div ng-repeat="item in arrayOfItems" id="{{item}}"> 
    Bla 
</div> 

Answer 2

Sie können $ sehen, wenn die Buchungen wählen ändern zählen und es eine Funktion binden das newResource.booking Array mit den Elementen mit ihren Standardwerten zu initialisieren.

function bookingChange() { 
    vm.newResource.booking = []; 
    for(var i = 0; i < vm.bookingCount; i++) { 
    vm.newResource.booking.push({ 
      from: undefined, 
      to:undefined 
    }); 
    } 
} 

Dann können Sie über das Array newResource.booking ng-wiederholen.

<div class="modal-body" ng-repear="booking in newResource.booking"> 
    <input ng-model="booking.from" /> 

Answer 3

Erste Modals HTML

Number of bookings: 
<input type="text" ng-model="numberOfBooking" name="numberOfBooking" /> 
<button type="button" ng-click="confirmNumberOfBooking()">Confirm Booking</button> 

Erste Modal-Controller

$scope.numberOfBooking = 1; 
$scope.newResource.bookings = [ 
    { 
    fromDateAndTime: "datetime", 
    toDateAndTime: "datetime" 
    } 
]; 

$scope.confirmNumberOfBooking = confirmNumberOfBooking; 
function confirmNumberOfBooking(){ 
    for(var i = 0; i < $scope.numberOfBooking; i++){ 
    $scope.newResource.bookings.push({fromDateAndTime: "datetime",toDateAndTime: "datetime"}); 
    } 
} 

Zweite Modal HTML

<div ng-repeat="booking in newResource.bookings track by $index"> 
    <!--Time From--> 
    <div class="row"> 
     <div class="col-md-3 date-and-time-from" > 
      <label>Date/Time From</label> 
     </div> 
     <div class="col-md-9"> 
     <div class="form-group"> 
      <span class="date-field"> 
      <ms-date-time-picker ng model="newResource.booking[$index].startDateTime" placeholder="From"></ms-date-time-picker> 
      </span> 
     </div> 
     </div> 
    </div> 

    <!--Time To--> 
    <div class="row"> 
     <div class="col-md-3 date-and-time-to" > 
      <label>Date/Time To</label> 
     </div> 
     <div class="col-md-9"> 
      <div class="form-group"> 
       <span class="date-field"> 
       <ms-date-time-picker ng-model="newResource.booking[$index].endDateTime" placeholder="To" ></ms-date-time-picker> 
       </span> 
      </div> 
     </div> 
     </div>