角度表最後添加行不加載引導程序日曆

Question

我正在使用角度將會議信息加載到表中。當我嘗試向表中添加新行時，添加的行不會加載最後一個引導日曆，因爲當我調用動態加載日期選擇器的函數時，角度尚未完成加載行。如何在Angular完成加載新行後調用加載日期選擇器？

這裏是我的代碼：

  <div ng-controller="virtualmeetingdetails" id="virtualmeetingdetails"> 
       <div class="row" id="proposedaddboards"> 
        <div class="form-group required"> 
         <label id="adboardnumber" class="control-label col-sm-4" for="spinner1">Proposed Number of Advisory Boards</label> 
         <div class="col-sm-4"> 
          <div id="spinnerDiv1" class="input-group spinner"> 
           <asp:TextBox id="spinner1" cssclass="form-control" value="0" runat="server" /> 
           <div class="input-group-btn-vertical"> 
            <button class="btn btn-default" type="button" ng-click="addUser()"><i class="fa fa-caret-up"></i></button> 
            <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="row" id="tblVirtualMeeting"> 
        <div class="form-group required"> 
         <div class="col-sm-12" > 
          <table class="table table-bordered table-striped" jq-table> 
           <thead style="background-color:#cad4d9"> 
            <tr> 
             <th>Proposed Date</th> 
             <th>Virtual Meeting</th> 
             <th>Location City</th> 
             <th>State</th> 
             <th>Country</th> 
             <th></th> 
            </tr> 
           </thead> 
           <tbody> 
            <tr ng-repeat="meeting in meetings"> 
             <td> 
              <div class="input-group input-append date" id="dtpicker{{$index}}" data-date-format="mm/dd/yyyy" style="width:150px;"> 
               <span class="text-center" ng-show="editMode">{{meeting.proposedbegindate}}</span> 
               <input type="text" class="form-control col-sm-3" runat="server" ng-hide="editMode" ng-model="meeting.proposedbegindate" /> 
               <span class="input-group-addon add-on" ng-hide="editMode"> 
                <span class="glyphicon glyphicon-calendar"></span> 
               </span> 
              </div>             
             </td> 
             <td> 
              <select ng-model="meeting.isvirtualmeeting" ng-hide="editMode" 
                ng-options="option.text for option in virtualmeetingoptions track by option.value" class="form-control">     
              </select> 
              <span class="text-center" ng-show="editMode">{{meeting.isvirtualmeeting.text}}</span> 
             </td> 
             <td> 

             <span class="text-center" ng-show="editMode">{{meeting.venuecity}}</span> 
             <input type="text" class="form-control" ng-hide="editMode" ng-model="meeting.venuecity" />             
              </td> 
             <td> 
              <select ng-model="meeting.venuestateID" ng-hide="editMode" ng-options="state.StateConst for state in statesList track by state.StateID" class="form-control"></select> 
              <span class="text-center" ng-show="editMode">{{meeting.venuestateID.StateConst}}</span> 
             </td> 
             <td> 

              <select ng-model="meeting.venuecountryid" ng-hide="editMode" ng-options="country.CountryName for country in countriesList track by country.CountryID" class="form-control"></select> 
              <span class="text-center" ng-show="editMode">{{meeting.venuecountryid.CountryConst}}</span> 
             </td> 
             <td style="width:170px"> 
              <span class="glyphicon glyphicon-pencil" style="color: green; font-size: medium; cursor: pointer" ng-show="editMode" ng-click="editMode = false; editUser(participant)"></span>&nbsp; 
              <span class="glyphicon glyphicon-floppy-save" style="color: #337ab7; font-size: medium; cursor: pointer" ng-hide="editMode" ng-click="editMode = true;saveField(meeting, <%=_CurrentUserID %>);"></span>&nbsp; 
              <span class="glyphicon glyphicon-remove-circle" style="color: red;font-size:medium;cursor:pointer" ng-click="removeItem($index)"></span> 
             </td> 
            </tr> 

           </tbody> 
          </table> 
         </div> 
        </div> 
       </div> 
      </div> 

控制器：

app.controller("virtualmeetingdetails", function ($scope, $http) { 
    $http.get("../Services/EngagementDataService.asmx/GetVirtualMeetings", { params: { 'mid': getParameterByName('mid')} }) 
    .success(function (response) { 
     var j = response.length; 
     var i = 0; 

     if (response.length > 0) { 
      while (i < j) { 
       response[i].proposedbegindate = moment(response[i].proposedbegindate).format("MM/DD/YYYY"); 
       i++ 
      } 
     } 



    ....more code goes here (removed) 



    $scope.addUser = function() { 
     $scope.editing = true; 
     var meetingcount; 
     if (typeof $scope.meetings === "undefined") 
      meetingcount = 0 
     else meetingcount = $scope.meetings.length; 

     $scope.inserted = { 
      engagementproposedinfoid: 0, 
      id: meetingcount + 1, 
      venuecity: '', 
      proposedbegindate: '', 
      venuestateid: 0, 
      venuecountryid: 1, 
      isvirtualmeeting: 0 
     }; 

     $scope.meetings.push($scope.inserted); 

     rendercalendars(meetingcount); 

    }; 

}); 

功能來呈現日期選擇器：

function rendercalendars(rows) { 
    var nowDate = new Date(); 
    var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0); 

    var j = rows; 
    var i = 0; 

    while (i < j) { 
     $('#dtpicker' + i).datepicker({ autoclose: true, startDate: today }); 
     i++ 
    } 
} 

當$ scope.addUser被調用的問題發生...它在調用rendercalendars函數之前加載表格行，以免日期選取器加載。

任何幫助將不勝感激。

Answer 1

我的猜測是這樣的：

這一行你改變你的範圍，你的下一個消化週期的重複將是「重做」。所以你的html被調整。

$scope.meetings.push($scope.inserted); 

然後你打電話給你的渲染功能，如果摘要之前命中它的全部搞砸了。

rendercalendars(meetingcount); 

但這只是我的猜測。

順便說一句，有一個自舉組件的角度實現（ui-boostrap），那麼你不必做jQuery的東西。

首頁這是一些幫助。