如何使用 Angular UI Bootstrap DatePicker Popup 和 ng-repeat答案

【问题标题】：How to use Angular UI Bootstrap DatePicker Popup with ng-repeat如何使用 Angular UI Bootstrap DatePicker Popup 和 ng-repeat
【发布时间】：2018-03-17 10:07:57
【问题描述】：

<div class="task-manager_block" ng-controller="ToDoCtrl">
    <div class="form_block clearfix">
        <form name="addToDo">
        <input class="add-input" placeholder="I need to..." type="text" name="inputToDo" ng-model="formTodoText" ng-model-instant ng-minlenght ng-minlength="5" ng-maxlength="40" ng-required="true"/>
        <button class="add-btn" ng-click="addTodo()" ng-disabled="! addToDo.inputToDo.$valid "><h2>Add</h2></button>
      </form>
    </div>
    <div class="tasks_block" ng-controller="DatepickerPopupCtrl">
        <div class="task_block col-md-3" ng-repeat="todo in todos">
            <div class="text_block">
                <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
                <p>{{todo.text}}</p>
            </div>
        </div>      
    </div>
</div>

我如何打开我点击的单个弹出窗口，因为现在所有弹出窗口都会立即打开，而与我点击的内容无关。

【问题讨论】：

标签： javascript angularjs angular-ui-bootstrap datapicker

【解决方案1】：

这是因为 ng-repeat 中的所有日期选择器都引用了相同的变量来检查打开状态。

看到这个。

is-open="popup1.opened"

您必须在单独的对象中管理此状态。例如，

在控制器中声明一个空对象

让 datePickersStat = {};

然后在您的 HTML 中，您可以使用任何东西作为对象键，只要它是唯一的。

is-open="datePickersStat[todo.id]"

希望对您有所帮助。

【讨论】：