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

问题描述

我正在使用角度引导来设置日历。我的问题是如何使用$ index在ngRepeat迭代中设置is-open属性？如果设置完全相同，当用户单击日历时，所有日历将弹出。但是

  is-open =newTestDateOpened + $ index
  

不工作。那我该怎么办呢然后在setNewTestDate（$ event，$ index）函数中，我可以将其设置为true。

 < divng- repeat ='testing in testingHistory'> 
< div class =row> 
< div class =col-sm-2> 
< p class =input-group> 
< input type =textclass =form-controldatepicker-popup =dd-MM-yyyyng-model =history.testingDateis-open =newTestDateOpened + $ indexmax -date =maxDateclose-text =Close/> 
< span class =input-group-btn> 
< button type =buttonclass =btn btn-defaultng-click =setNewTestDate（$ event，$ index）>< i class =glyphicon glyphicon-calendar>< ; / I>< /按钮> 
< / span> 
< / p> 
< / div> 
< / div> 
< / div> 
  

解决方案

我已经想到了一种方式。

只需使用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设置角ui引导日历是开放属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！