禁用列表项 - angularjs

Question

我正在 AngularJS 中创建面包屑导航。由于用户不符合要求，某些链接应该被禁用。

我查看了 angular 文档，发现不能在列表项上使用 ng-disabled。所以我使用 ng-class 来使列表项变灰。这是我目前使用的 HTML-代码：

<li id="first">
   <div ng-click="vm.navigateTo(0)">
      <label translate="{{vm.translationKeys[0]}}"></label>
   </div>
 </li>

 <li>
    <div ng-click="vm.navigateTo(1)">
       <label translate="{{vm.translationKeys[1]}}" ng-class="{'hasRequests': vm.programHasRequests == false && vm.currentStepNumber != 1}"></label>
    </div>
 </li>

 <li>
    <div ng-click="vm.navigateTo(2)">
       <label translate="{{vm.translationKeys[2]}}" ng-class="{'hasRequests': vm.hasRequestIdInUrl == false}"></label>
    </div>
 </li>

<li id="last">
   <div ng-click="vm.navigateTo(3)">
      <label translate="{{vm.translationKeys[3]}}" ng-class="{'hasRequests': vm.hasRequestIdInUrl == false}"></label>
   </div>
</li>

有没有办法让 ng-disabled 在列表项上工作，因为现在即使应用了 ng-class 我仍然可以点击列表项。

感谢您的帮助，

你好，布伦特

Answer 1

您无法禁用列表项。您使用 CSS 通过颜色更改禁用列表项。您可以在 javascript 上以同样的方式处理它。检查它是否禁用它。然后做流量

<li>
    <div ng-click="vm.navigateTo(1,vm.translationKeys)">
       <label translate="{{vm.translationKeys[1]}}" ng-class="vm.programHasRequests == false ? 'Redirect':'NotRedirect'"></label>
    </div>
</li>

在'navigateTo'函数中你需要通过第二个参数检查是否重定向。

禁用列表项 - angularjs

Disable list item - angularjs

html

angularjs

listitem

angularjs-ng-disabled