动态 类 在 AngularJS 中使用 ng-repeat
Dynamic classes using ng-repeat in AngularJS
这不是重复的。
在另一个post中,他们只是在做一个三元运算。我想在 ng-repeat 中更改 classes。
我有这段代码,有一些小错误。
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" 时,class 变为 col-md-3
,因为我使用的是 ng-repeat 适用于所有元素。我希望 class 仅应用于 serverIdLength > 12,如果它小于 12,则应应用 col-md-2
。
请指教
您希望根据 serverId
字符串长度分别为 selection.serverIds
列表的每个元素切换 class 是否正确?需要知道您的 selection.serverIds
,是您的 "Scope Object" 吗?如果是,那我就做
<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
正在为所有列表计算一次。虽然您想根据每个特定项目 属性.
获得动态 class
如果我不明白这个问题和进入条件,让我们继续讨论。
试试看:
ng-class="{'col-md-3':server.serverId.length > 12, 'col-md-2':server.serverId.length <= 12}"
问题似乎出在这里:
_.forEach($scope.selection.serverIds, function(a) {
$scope.serverIdLength = a.serverId.length;
});
不管怎样$scope.serverIdLength
总是会被设置为最后一个serverId的长度。那是因为它是一个全局变量并且只有一个实例。这就是为什么您的所有 类 都匹配的原因。它们都引用同一个变量。
而不像@dhilt 建议放弃控制器代码并访问 dom 中的长度:
ng-class="server.serverId.length > 12 ? 'col-md-3' : 'col-md-2'"
这不是重复的。
在另一个post中,他们只是在做一个三元运算。我想在 ng-repeat 中更改 classes。
我有这段代码,有一些小错误。
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" 时,class 变为 col-md-3
,因为我使用的是 ng-repeat 适用于所有元素。我希望 class 仅应用于 serverIdLength > 12,如果它小于 12,则应应用 col-md-2
。
请指教
您希望根据 serverId
字符串长度分别为 selection.serverIds
列表的每个元素切换 class 是否正确?需要知道您的 selection.serverIds
,是您的 "Scope Object" 吗?如果是,那我就做
<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
正在为所有列表计算一次。虽然您想根据每个特定项目 属性.
如果我不明白这个问题和进入条件,让我们继续讨论。
试试看:
ng-class="{'col-md-3':server.serverId.length > 12, 'col-md-2':server.serverId.length <= 12}"
问题似乎出在这里:
_.forEach($scope.selection.serverIds, function(a) {
$scope.serverIdLength = a.serverId.length;
});
不管怎样$scope.serverIdLength
总是会被设置为最后一个serverId的长度。那是因为它是一个全局变量并且只有一个实例。这就是为什么您的所有 类 都匹配的原因。它们都引用同一个变量。
而不像@dhilt 建议放弃控制器代码并访问 dom 中的长度:
ng-class="server.serverId.length > 12 ? 'col-md-3' : 'col-md-2'"