如何使用ng-disable禁用角度js中的下拉列表项

时间:2016-08-03 11:28:13

标签: javascript html angularjs

这是我的html文件。这是我的下拉列表有两个listitems密码重置和发送激活电子邮件我想禁用重置密码

        <div class="active-send-select" pull-left btn-group title="{{::'title.active.filter' | translate}}">
                            <button class="btn btn-large dropdown-toggle" data-toggle="dropdown" ng-disabled="!actionButtonStatus.SENT">
                                <i class="fa fa-envelope fa-lg"></i>
                                <span class="action-button-text">{{::'label.button.send' | translate}}</span>
                                <i class="icon-chevron-down pull-right" style="margin-top:-20px;"></i>
                            </button>
                            <ul class="dropdown-menu filter-state">
                                <li ng-class="abc"><a href="" ng-click="sendActivationNotification()"><span ng-class="{resettest: userstatus == 'Complete'}">{{::'label.dropdown.sendActivation' | translate}}</span></a></li>
                                <li class="test-dropdown">
                                    <a href="" ng-click="onSendPasswordReset()"><span ng-class="{resettest: userstatus == 'Notified' || 'Added'}">{{::'label.dropdown.resetPassword' | translate}}</span></a>
                                </li>
                            </ul>
                        </div> i did this wid ng-class a su told now its showing gray color and but still m able to click on the password reset list item and it is redirecting to password reset page.


    CSS code

     .resettest{
                 color: darkgray;
                 cursor: not-allowed;
             }

2 个答案:

答案 0 :(得分:0)

在您的控制器中:

isSelectDisabled() {
  if (this.currentState === 'not ready') {
    return true;
  }
  return false;
}

然后在你的模板中:

<li ng-disabled="vm.isSelectDisabled()"></li>

这假设你使用 vm ofc。

答案 1 :(得分:-2)

您可以在没有自定义$ scope函数的情况下执行此操作:

<li ng-disabled="currentState === 'Not ready'"></li>

如果该条件评估为true,则禁用将为真。然而,当你把它放在li元素上时,我认为不会发生任何事情。你最好把这个条件放在button元素上。

修改

此处的问题是禁用的属性对li元素没有影响。如果要显示该列表项已被禁用,则需要分别使用ng-classng-style来应用类或样式。