如何使用 $index 设置 angular ui bootstrap 日历 is-open 属性? [英] How to use $index to set angular ui bootstrap calendar is-open attribute?

问题描述

我正在使用 angular-ui bootstrap 来设置日历.我的问题是如何使用 $index 在 ngRepeat 迭代中设置 is-open 属性?如果设置都一样，当用户点击日历时，会弹出所有的日历.但是

 is-open="newTestDateOpened + $index"

不起作用.那么我该怎么做呢?然后在 setNewTestDate($event,$index) 函数中，我可以将其设置为 true.

 
<div class="row"><div class="col-sm-2"><p class="输入组"><input type="text" class="form-control" datepicker-popup="dd-MM-yyyy" ng-model="history.testingDate" is-open="newTestDateOpened + $index" max-date="maxDate" close-text="关闭"/><span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="setNewTestDate($event,$index)"><i class="glyphicon glyphicon-calendar"></i></span></p>

解决方案

我自己想出了一种方法.对于那些有类似问题的人.

只需使用 JavaScript 对象.

is-open="existingTestDate['idx'+$index]"...ng-click="setExistingTestDate($event,$index)"

然后在对应的js文件中.

$scope.existingTestDate = {};$scope.setExistingTestDate = function($event,idx) {$event.preventDefault();$event.stopPropagation();$scope.existingTestDate['idx'+idx] = true;};

通过这种方式，您可以在 ngRepeat 迭代中控制日历按钮.

I am using angular-ui bootstrap to set calendar. My question is how to set the is-open property in the ngRepeat iteration with the $index? If set all the same, when user click the calendar, all the calendar would pop up. But the

    is-open="newTestDateOpened + $index"

does not work. So how can I do it? then in the setNewTestDate($event,$index) function i am able to set it as true.

    <div ng-repeat='history in testingHistory'>
        <div class="row">
            <div class="col-sm-2">
                <p class="input-group">
                <input type="text" class="form-control" datepicker-popup="dd-MM-yyyy" ng-model="history.testingDate" is-open="newTestDateOpened + $index" max-date="maxDate" close-text="Close" />
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="setNewTestDate($event,$index)"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
                </p>
            </div>
        </div>
    </div>

解决方案

I've figured out one way by myself. For those who would have similar questions.

Just use JavaScript object.

is-open="existingTestDate['idx'+$index]"
    ... 
ng-click="setExistingTestDate($event,$index)"

Then in the corresponding js file.

$scope.existingTestDate = {};
$scope.setExistingTestDate = function($event,idx) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.existingTestDate['idx'+idx] = true;
};

By this way, you can control the calendar button in a ngRepeat iteration.

这篇关于如何使用 $index 设置 angular ui bootstrap 日历 is-open 属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！