这不是重复的。
在另一篇文章中,他们只是在做一个三元操作。我想在 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>
控制器:
_.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
。
请指教。
字符串长度分别为列表中的每个selection.serverIds
元素切换类是否正确serverId
?需要知道你的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
对所有列表进行一次计算。虽然您希望有一个基于每个项目特定属性的动态类。
如果我不了解问题和进入条件,让我们继续讨论。
问题似乎就在这里:
_.forEach($scope.selection.serverIds, function(a) {
$scope.serverIdLength = a.serverId.length;
});
无论什么$scope.serverIdLength
都将始终设置为最后一个服务器 ID 的长度。那是因为它是一个全局变量,并且只有一个实例。这就是您所有课程都匹配的原因。它们都引用同一个变量。
相反,就像@dhilt建议放弃控制器代码并在 dom 中获取长度一样:
ng-class="server.serverId.length > 12 ? 'col-md-3' : 'col-md-2'"
试试:
ng-class="{'col-md-3':server.serverId.length > 12, 'col-md-2':server.serverId.length <= 12}"