Dynamic classes using ng-repeat in AngularJS

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.

Duplicate of this question. Please make more research before posting. — Alburkerk
– Alburkerk, Commented Oct 4, 2017 at 21:17
Yes, this doesnt look like a duplicate. In the other post, they are just doing a ternary operation. I wanna changes classes within ng-repeat. — arunmmanoharan
– arunmmanoharan, Commented Oct 4, 2017 at 21:20

dhilt · Accepted Answer · 2017-10-04 21:31:53Z

2

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.

edited Oct 4, 2017 at 21:31

answered Oct 4, 2017 at 21:12

dhilt

21.1k8 gold badges79 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

arunmmanoharan Over a year ago

Hi I have edited my question with some images. I guess you might get a better understanding of the issue I am facing.

dhilt Over a year ago

@a2441918 So what's the solution? is it my answer? if no, I recommend update your question. I also recommend to change the title of the issue!

Niles Tanner · Accepted Answer · 2017-10-04 21:37:07Z

1

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

answered Oct 4, 2017 at 21:37

Niles Tanner

4,0512 gold badges19 silver badges33 bronze badges

Comments

GIA · Accepted Answer · 2017-10-04 21:32:06Z

0

Try that:

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

answered Oct 4, 2017 at 21:32

GIA

1,7462 gold badges29 silver badges41 bronze badges

Collectives™ on Stack Overflow

Dynamic classes using ng-repeat in AngularJS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related