Question

如何禁用使用ui-router的下拉菜单项，看起来像这样？

 <ul class="dropdown-menu">
    <li><a ui-sref="state.random">A random state</a></li>
</ul>

显然这不起作用：

<li ng-disabled="true"><a ui-sref="state.random">A random state</a></li>

也不是：

<li><a ui-sref="state.random" ng-disabled="true">A random state</a></li>

Answer 1

ng-disabled不适用于li代码。需要使用css样式执行此操作。

.disabled {
    pointer-events:none; //This makes it not clickable
    opacity:0.6;         //This grays it out to look disabled
}

<li class="disabled"><a ui-sref="state.random">A random state</a></li>

Answer 2

禁用可能无效。您可能必须使用带有ui-sref的三元运算符。我认为禁用是有条件的。可以使用CSS引入禁用的样式效果。

$scope.someValue = false;

<li><a ui-sref={{someValue ? 'state.random' : ''}}>A random state</a></li>

Answer 3

我遇到了类似的问题（角度2），这对我有用：

HTML文件：

<li (click)="onClick(item, $event)"
  tooltip="{{isItemDisabled() ? getText(item.tooltipText) : undefined}}">
  <a href="" role="tab" data-toggle="tab"
       [ngClass]="{'disabled': isItemDisabled()}"
       id="btnSelect{{getMenuLabel(tabitem)}}">{{getMenuLabel(tabitem)}}</a>
</li>

TS文件：

onClick(isItemDisabled, $event) {
  $event.preventDefault();
  if (!isItemDisabled) {
    // do whatever
  }
}

CSS文件：

disabled {
 opacity: 0.6;
 cursor: not-allowed;
 pointer-events: none;
}

在<li>内的锚点上禁用了ng

3 个答案: