Question

我正在使用来自UI引导程序的日期选择器的angular指令。我还使用ng-repeat添加多行。我在ng-repeat中添加了日期选择器代码。我在bootstrap模态中显示了这些日期选择器。 ng-repeat工作正常。但是，如果我添加多行并单击单个日历图标，则会显示所有日期选择器的所有日历弹出窗口。我不知道为什么会这样。我使用is-open="$parent.opened1"执行点击日历按钮。如果我只使用is-open="opened1"，则日历popoup只会打开一次（表示：选择任何日期后无法打开）。如果我使用is-open="$parent.opened1"，那么在添加多行后，所有日历弹出窗口都会打开。这是我的代码 -

<div class="modal fade bs-example-modal-lg  preventiveCarePop" id="preventiveProcess" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <form role="myForm" name="myForm">
        <div class="modal-dialog" style="width: 35%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 style="margin: 0px;">
                        Preventive Care:&nbsp;<span ng-bind="patientObj.firstName"></span>
                        &nbsp;<span ng-bind="patientObj.lastName"></span><small
                            class="newSmall"><span> ({{patientObj.gender}}, <i
                                class="fa fa-mobile fa-lg"></i>:
                                {{patientObj.contact.mobileNumber}})
                        </span></small>
                    </h4>
                </div>
                <input type="hidden" ng-model="currentReminder" />
                <div class="modal-body">
                    <div id="divActivites" name="divActivites">
                        <div class="form-group">
                            <div class="box-placeholder" ng-repeat="preventive in preventive.preventiveDetailsList">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <label for="exampleInputEmail1">Start Date<span
                                                style="color: red;">*</span></label>
                                            <p class="input-group">
                                                <input type="text" class="form-control"
                                                    datepicker-popup="dd-MM-yyyy"
                                                    ng-model="preventive.startOnDate" 
                                                    is-open="$parent.opened2"
                                                    id="dos-{{$index}}"                                                         
                                                    datepicker-options="dateOptions" close-text="Close"
                                                    placeholder="Select Date" required /> 
                                                    <span class="input-group-btn">
                                                    <button type="button" class="btn popUpCal"
                                                        ng-click="open($event,'opened2')">
                                                        <i class="fa fa-calendar"></i>
                                                    </button>
                                                   </span>
                                            </p>
                                        </div>
                                        <div class="col-lg-4">
                                            <label for="exampleInputEmail1">End Date<span
                                                style="color: red;">*</span></label>
                                            <p class="input-group">

                                                <input type="text" class="form-control"
                                                    datepicker-popup="dd-MM-yyyy"
                                                    ng-model="preventive.endOnDate"
                                                    id="doe-{{$index}}" 
                                                    is-open="$parent.opened1"
                                                    datepicker-options="dateOptions" close-text="Close"
                                                    placeholder="Select Date" required />
                                                     <span class="input-group-btn">
                                                    <button type="button" class="btn popUpCal"
                                                        ng-click="open($event,'opened1')" >
                                                        <i class="fa fa-calendar"></i>
                                                    </button>
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-default" ng-click="addDummyPreventive(preventive.preventiveDetailsList,currCaseSheetObjForAddPrv.speciality,preventive.preventiveDetailsList.length)" style="float: right" title="Add new preventive"><i class="fa fa-plus-circle fa-lg"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

这是我的控制器

$scope.open = function($event,opened) {

            $event.preventDefault();
            $event.stopPropagation();

            $scope[opened] = true;
          };

          $scope.dateOptions = {
            formatYear: 'yy',
            startingDay: 1
          };

我不知道我用什么工作都很好。请分享你的想法。提前谢谢。

Answer 1

请参阅this demo，代码内的注释可能会有所帮助。

HTML：

<div class="row" ng-repeat="dt in dates">
        <div class="col-md-6">
            <p class="input-group">
              <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt.date" is-open="dt.opened" datepicker-options="dateOptions" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event,dt)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
    </div>

JS：

 $scope.open = function($event, dt) {
    $event.preventDefault();
    $event.stopPropagation();

    dt.opened = true;
  };

带有ng-repeat的UI引导日期选择器不起作用

1 个答案: