Question

我有两种输入形式，日期和日期来自，我想用 ng-repeat 重复这些形式。现在，它是一个阻止HTML文本，我不知道什么是最有效的方法，除了将 js 方面的所有div元素合并到一起加上符号。

离。 '<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>

我的应用程序的目标是用户选择他将在第一个模态中存储在他的数组中的预订量。然后他点击一个按钮，上面的html文本将出现在第二个模态中。根据用户选择的预订数量（让我们说3），上面的html将在一个模式中重复3次（在垂直列表中将有3个Date From / Date To表单）。

任何建议都将不胜感激！

Answer 1

使用ng-repeat很简单，只需浏览the documentation here即可。我在你的问题中看到你正在追加像：

这样的div

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

ngRepeat directive将用于HTML本身。像这样：

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

Answer 2

第一个模式HTML

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

第一模态控制器

$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"});
    }
}

第二个模态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>

ng-重复一段html

2 个答案: