动态 bootstrap ui 日期选择器

Question

我有一个 bootstrap ui 日期选择器位于 ng-repeat 中。因此用户可以添加任意数量的行，这将导致日期选择器的多个实例。我看到的关于多个日期选择器的所有示例仅在您有两个并且解决方案在将它们应用于动态情况时不起作用时显示。

打开日期选择器的属性是 is-open="open" 并且 open 应该是唯一的，所以我需要一种方法来关闭所有日期选择器并且只打开我选择的那个。请记住，每个都是动态的 uilt。

这是转发器中使用的代码。

<div class="input-group">     
                                        <input type="text" class="form-control" name="birthdate" datepicker-popup="{{format}}" ng-model="cabins[$parent.$index].passengers[$index].birth_date" is-open="cabins[$parent.$index].passengers[$index].datePicker" min-date="minDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" ng-click="open($event,$parent.$index,$index)"><i class="glyphicon glyphicon-calendar"></i></button>
                                        </span>        
                                    </div>

Answer 1

使用ng-repeat $index, is-open"$parent.viewModel.openIndex === $index" 并在open事件中赋值viewModel.openIndex: ng-click="$parent.viewModel.openIndex = $索引”。注意 $parent 的使用，这样做是为了访问 ng-repeat 项目范围内的视图模型范围。

Answer 2

已接受的答案对我不起作用。

我观察到我得到的错误是 is-open 属性中的表达式不可分配。这意味着，在内部，日期选择器试图为此属性中的表达式设置值。

所以，为了解决这个问题，我删除了相等性检查并使用 true 和 false 值：

<div class="input-group w-md">
    <input type="text" class="form-control" ng-click="openCustom($event, $index)" uib-datepicker-popup="{{ 'shortDate' }}" ng-model="employee.probation_end_date" is-open="$parent.opened[$index]" datepicker-options="datepickerOptions" ng-required="false" close-text="Close"/>
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="openCustom($event, $index)">


 <i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>

在控制器中我定义了这个方法：

$scope.opened = [];

$scope.openCustom = function ($event, $index) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened[$index] = true;
};

动态 bootstrap ui 日期选择器

Dynamic bootstrap ui datepicker

dynamic

datepicker

angularjs

angular-ui-bootstrap