使用 ngClass 和 ngRepeat答案

【问题标题】：Using ngClass with ngRepeat使用 ngClass 和 ngRepeat
【发布时间】：2014-07-18 12:01:27
【问题描述】：

我有一个 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 指令移动到锚点，则一切正常（如有必要，我可以提供有关如何操作的详细信息）。

【问题讨论】：

需要看看isEnabled 在控制器中是如何工作的。如果它可以是一个变量而不是函数会更好

标签： css angularjs twitter-bootstrap-3

【解决方案1】：

您的 html 使用的是 .isDisabled()，但您的控制器使用的是 .isEnabled()。

【讨论】：

就是这样。谢谢！

【解决方案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 类。

【讨论】：