如何禁用条件为 angularJs 的元素列表？

Question

我需要在某个参数等于 'N' 时禁用导航中的元素列表，并在它等于 'S' 时启用它。这是我的代码

<div class="slidebar-nav">
  <nav class="navbar navbar-default" role="navigation">
    <!-- Main Menu -->
    <div class="side-menu-container">
      <ul class="nav navbar-nav">
        <li ng-disabled="trxAbil.I9WSFONI == 'N'" 
            ng-class="{'current' : itemSelected === 'Gestione fondi'}"
            ui-sref="home.pag1.inquiryFondi({innescatoDaMenuLaterale: true})" 
            ng-click="onMenuSelection('Gestione fondi')">
          <a><span class="glyphicon glyphicon-edit"></span> Gestione fondi</a>
        </li>
        <li class="active" 
            ng-class="{'current' : itemSelected === 'Invio fondi'}"
            ui-sref="home.pag2" ng-click="onMenuSelection('Invio fondi')">
          <a><span class="glyphicon glyphicon-send"></span> Invio fondi</a>
        </li>
        <li class="active" 
            ng-class="{'current' : itemSelected === 'Sintesi fondi'}" 
            ui-sref="home.pag3" ng-click="onMenuSelection('Sintesi fondi')">
          <a><span class="glyphicon glyphicon-send"></span> Sintesi fondi</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

我尝试使用 ng-disabled="trxAbil.I9WSFONI == 'N'" 但它不起作用。有任何想法吗？提前谢谢你

Answer 1

如果您想显示该项目但使用 CSS 使其不可点击并看起来已禁用，或者您正在使用 bootstrap 然后添加 'disabled' : trxAbil.I9WSFONI == 'N' 条件 ng-class 属性<li> 标签：

CSS:

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

HTML:

<li ng-class="{'disabled' : trxAbil.I9WSFONI == 'N', 'current' : itemSelected === 'Gestione fondi'}"   ui-sref="home.pag1.inquiryFondi({innescatoDaMenuLaterale: true})" ng-click="onMenuSelection('Gestione fondi')"><a><span class="glyphicon glyphicon-edit"></span> Gestione fondi</a></li>

Answer 2

我假设您在 UI 中使用 Bootstrap（通过观看 navbar navbar-default classes）。

您只需根据您的条件指定 disabled class 即可禁用菜单中的项目。它会自动阻止点击该项目。

<li ng-class="{'current' : itemSelected === 'Gestione fondi', 'disabled': trxAbil.I9WSFONI == 'N'}" ... > ... </li>

无需将 ng-disabled 分配给 li 元素。

如何禁用条件为 angularJs 的元素列表？

How disable element list with a condition on angularJs?

angularjs

twitter-bootstrap

list

angularjs-ng-disabled