javascript - 在 AngularJS 中使用 ng-repeat 的动态类

Question

这不是重复的。

在另一篇文章中，他们只是在进行三元运算。我想在 ng-repeat 中更改类。

我的这段代码有一些小错误。

HTML:

<div id="server-id-list-container" class="panel-body col-md-12 scrollbar">
    <div class="server-id-list-element" ng-class="serverIdLength > 12 ? 'col-md-3' : 'col-md-2'" ng-repeat="server in selection.serverIds">
        <p class="alert alert-info">{{server.serverId}}<span ng-click="removeServerId($index)" class="glyphicon glyphicon-remove"></span></p>
    </div>
</div>

Controller :

_.forEach($scope.selection.serverIds, function(a) {
    $scope.serverIdLength = a.serverId.length;
});

作用域对象:

[
    {
        "serverId": "loma1pwipdb2002",
        "serverName": "",
    },
    {
        "serverId": "shdmqprtp1",
        "serverName": "",
    }
]

当我输入“loma1pwipdb2002”时，该类变为 col-md-3 并且因为我正在使用 ng-repeat 适用于所有元素。我希望该类仅应用于 serverIdLength > 12，如果小于 12，则应应用 col-md-2。

请指教。

Answer 1

您是否希望根据 serverId 字符串长度分别为 selection.serverIds 列表的每个元素切换类？需要知道您的 selection.serverIds，它是您的“范围对象”吗？如果是，那我就做

<div 
  class="server-id-list-element"
  ng-repeat="server in selection.serverIds"
  ng-class="server.serverId.length > 12 ? 'col-md-3' : 'col-md-2'"> ... </div>

问题是您的 $scope.serverIdLength 正在为所有列表计算一次。虽然您希望拥有一个基于每个项目特定属性的动态类。

如果我不明白问题和进入条件，让我们继续讨论。