Angularjs - 表格中的 uib-datepicker答案

【问题标题】：Angularjs - uib-datepicker in an tableAngularjs - 表格中的 uib-datepicker
【发布时间】：2016-12-13 23:01:06
【问题描述】：

我正在尝试在表格中显示一个 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;
};

当我单击日历按钮时，会显示多个日历。当我选择一个日期时，它会应用于表格的最后一个元素。

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

【问题讨论】：

您为所有输入字段提供相同的 ID (<input id="field_dateReglementEffectifClient" ...>)。你能尝试给他们不同的ID吗？
我试过不带id，也不行。

标签： angularjs datepicker

【解决方案1】：

解决方法：

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

【讨论】：