[英]How to use Angular UI Bootstrap DatePicker Popup with ng-repeat
<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>
我如何打開一個單擊的彈出窗口,因為現在所有這些彈出窗口都立即打開,而與單擊的內容無關。
發生這種情況的原因是ng-repeat中的所有datepicker都引用相同的變量來檢查打開狀態。
看到這個。
is-open =“ popup1.opened”
您將必須在單獨的對象中管理此狀態。 例如,
在控制器中聲明一個空對象
讓datePickersStat = {};
那么在HTML中,只要它是唯一的,就可以使用任何東西作為對象鍵。
is-open =“ datePickersStat [todo.id]”
希望能有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.