Question

我有ui-bootstrap down，在下拉列表中显示4个选项，如下所示：

<div class="btn-group" dropdown style="margin: 0; padding: 0;">
<div id="btnDate{{$index+1}}" ng-click="btnDateClick($index+1, clientEMAR,$event)" class="dropdown-toggle" dropdown-menu style="margin 0; padding: 0; height: 55px; width: 50px;">click me </div>                                       
<ul id="btnDropDownList{{$index+1}}" ng-click="isOpen = true" class="dropdown-menu" style="padding-top: 0; padding-bottom: 0">
       <li class="bg-success"><a ng-click="green(clientEMAR, $index+1)">Administered</a></li>
       <li class="bg-danger"><a ng-click="red(clientEMAR, $index+1)">Refused / Missed</a></li>
       <li class="bg-warning"><a ng-click="orange(clientEMAR, $index+1)">Medication Held</a></li>
       <li class="bg-info"><a ng-click="details(clientEMAR, $index+1)">Details</a></li>
       </ul></div>

在一些情况下，我想检查对象clientEMAR的几个属性，然后显示警告并希望返回而不显示下拉选项。

我根据我的小知识使用了$ event.stopPropogation（），但对我没用。

$scope.btnDateClick = function (index, clientEMAR,$event) {

if (clientEMAR.sched_id == 0) 
{
   alert("Can't edit empty schedule dates.");
   $event.stopPropagation();
   return;
} 
}

请帮忙。

编辑解决方案：

<div class="btn-group" dropdown style="margin: 0; padding: 0;">
<div id="btnDate{{$index+1}}" ng-click="btnDateClick($index+1, clientEMAR,$event)" ng-disabled="disabledDD" class="dropdown-toggle" dropdown-menu style="margin 0; padding: 0; height: 55px; width: 50px;">click me </div>                                       
<ul id="btnDropDownList{{$index+1}}" ng-click="isOpen = true" class="dropdown-menu" style="padding-top: 0; padding-bottom: 0">
   <li class="bg-success"><a ng-click="green(clientEMAR, $index+1)">Administered</a></li>
   <li class="bg-danger"><a ng-click="red(clientEMAR, $index+1)">Refused / Missed</a></li>
   <li class="bg-warning"><a ng-click="orange(clientEMAR, $index+1)">Medication Held</a></li>
   <li class="bg-info"><a ng-click="details(clientEMAR, $index+1)">Details</a></li>
</ul></div>

$scope.btnDateClick = function (index, clientEMAR,$event) {

if (clientEMAR.sched_id == 0) 
{
alert("Can't edit empty schedule dates.");
$scope.disabledDD = true;
return;
} 
}

刚刚添加了一个标记，将下拉切换的禁用属性设置为开/关，它就像魔法一样。

ui-bootstrap下拉列表显示警报并禁用下拉列表

0 个答案: