angularjs - 动态 bootstrap ui 日期选择器

Question

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

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

这是中继器中使用的代码。

<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

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

我观察到我收到一个错误，即 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>

在 Controller 中我定义了这个方法:

$scope.opened = [];

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

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