Angularjs - 表中的uib-datepicker

时间:2016-12-13 14:18:46

标签: angularjs datepicker

我正在尝试在表格中显示一个uib-datepicker。

<table ng-table="tableParamsReglement"  class="table table-bordered table-hover" id="dynamic-table" >
    <tr ng-repeat="activite in $data"  >
        <td  class="text-center" data-title="'Date fin astreinte'" >
            <div class="input-group">
                <input id="field_dateReglementEffectifClient" type="text" class="form-control" name="dateReglementEffectifClient" uib-datepicker-popup="{{vm.formatDate}}" ng-model="activite.dateReglementEffectifClient"
                       is-open="vm.datePickerOpenStatus.dateReglementEffectifClient" />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="vm.openCalendar('dateReglementEffectifClient')"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </div>
        </td>
    </tr>
</table>

控制器:

vm.datePickerOpenStatus = {};
vm.datePickerOpenStatus.dateReglementEffectifClient = false;

vm.openCalendar = function(date) {
    vm.datePickerOpenStatus[date] = true;
};

当我点击日历按钮时,会显示多个日历。而当我选择约会时,它会应用于我桌子的最后一个元素。

我不知道我在这里做错了什么。

enter image description here

1 个答案:

答案 0 :(得分:0)

解决:

<td  class="text-center" data-title="'Date fin astreinte'" >
    <div class="input-group">
        <input  type="text" class="form-control" uib-datepicker-popup="{{vm.formatDate}}" ng-model="activite.dateReglementEffectifClient"
               is-open="activite.isOpen" />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="vm.openCalendar($event, activite)"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </div>
</td>

vm.openCalendar = function($event, activite) {
    $event.preventDefault();
    $event.stopPropagation();

    activite.isOpen = true;
};