Question

我有一个AngularJS局部视图，其中包含以下导航：

<nav class="pull-right">
    <ul class="nav nav-pills">
        <li ng-repeat="button in buttons" ng-class="{disabled: !button.isDisabled()}">
            <a href="{{here}}" ng-click="button.onClick()">{{button.text}}</a>
        </li>
    </ul>
</nav>

在控制器中，我定义了一个导航按钮数组，每个导航按钮都有三个属性：

text - 要在按钮中显示的文本
onClick（） - 单击按钮时要执行的操作
isEnabled（） - 是否启用按钮

对于ngRepeat中的每个li，如果当前button.isEnabled（）返回false，我想添加（Bootstrap）css类.disabled。

我遇到的问题是如果禁用ngRepeat中的最后一个按钮，则所有按钮都具有.disabled类。如果我将ngClass指令移动到锚点，那么一切正常（我可以提供必要的详细信息）。

Answer 1

您的HTML正在使用.isDisabled()，但您的控制器已.isEnabled()。

Answer 2

我不认为disabled类对链接做任何事情。它仅适用于按钮和输入。我使用ng-if来切换链接，而不是使用已停用：

    <li ng-repeat="button in buttons">
        <div ng-if="!button.isDisabled()">
          <a href="{{here}}" ng-click="button.onClick()">{{button.text}}</a>
        </div>
        <div ng-if=!button.isDisabled()">
          {{button.text}
        </div>
    </li>

您可以为禁用版本做一些不错的样式，以使其更好地流动。但是，我不会在这里使用bootstrap disabled类。

使用带有ng重复的ng类

2 个答案: