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

Question

This is not a duplicate.

In the other post, they are just doing a ternary operation. I wanna changes classes within ng-repeat.

I have this piece of code with little bugs.

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;
});

Scope Object:

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

When I enter "loma1pwipdb2002", the class becomes col-md-3 and since I am using ng-repeat applies for all elements. I want the class to be applied only to serverIdLength > 12 and if its lesser than 12, col-md-2 should get applied.

Please advice.

Answer 1

Is it correct that you want to switch your class for each element of selection.serverIds list separately based on serverId string length? Need to know your selection.serverIds , is it your "Scope Object"? If yes, then I would do just

<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>

The problem is that your $scope.serverIdLength is being calculated once for all the list. While you want to have a dynamic class based on each item specific property.

Let's continue discussion if I didn't understand the issue and the entry conditions.

Answer 2

the issue seems to lie here:

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

No matter what $scope.serverIdLength will always be set to the length of the last serverId. That because it's a global variable and there is only one instance of it. This is why all your classes match. They all reference the same variable.

Instead like @dhilt suggested ditch the controller code and acccess the length in the dom:

ng-class="server.serverId.length > 12 ? 'col-md-3' : 'col-md-2'"

Answer 3

试试看：

ng-class="{'col-md-3':server.serverId.length > 12, 'col-md-2':server.serverId.length <= 12}"