Angular table最后添加了一行没有加载bootstrap日历

时间:2015-11-06 15:29:13

标签: angularjs datepicker

我正在使用angular将会议信息加载到表格中。当我尝试向表中添加新行时,添加的行不会加载最后一个引导程序日历,因为当我调用函数动态加载datepicker时,angular尚未完成加载行。在Angular完成加载新行后,如何调用加载datepicker?

这是我的代码:

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

    };

});

渲染datepicker的函数:

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函数之前加载表行,这样就不会加载日期选择器。

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

我的猜测是这样的:

使用此行您可以更改范围,在下一个摘要周期中,重复将重做&#34;重做&#34;。所以你的HTML被调整了。

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

然后你调用你的渲染函数,如果之前的摘要命中,它就会搞乱。

rendercalendars(meetingcount);

但那只是对我的猜测。

BTW有一个自举组件的角度实现(ui-boostrap),那么你就不必做jQuery的东西了。

回家这是一种帮助。