using angular to modify css class properties

Question

I have a css class 'suggestions-list'in which I have height: initial; in my angularjs code in a condition I want to change height: inherit; how can I modify this css class using angular?

in my CSS file I have :

.suggestions-list {
    position: absolute;
    list-style-type: none;
    margin: 0 0 0 35px;
    padding: 0;
    overflow: scroll;
    height: initial;
    width: 250px;
    border-bottom: 50px;
}

and this is my HTML:

<ul class="suggestions-list" ng-show="myVar">
     <li ng-repeat="suggestion in suggestions track by $index" ng-class="{active : selectedIndex === $index}" ng-click="AssignValueAndHide($index)">{{suggestion}}</li>
</ul>

You can do it like this: ng-class="{active : selectedIndex === $index}" — dfsq
– dfsq, Commented Jul 4, 2016 at 12:44
With above class active will be set if selectedIndex === $index is true. If it doesn't happen in your case, it means that selectedIndex === $index is false. — dfsq
– dfsq, Commented Jul 4, 2016 at 12:54

MeTe-30 · Accepted Answer · 2016-07-04 12:06:30Z

2

Use ng-style

<div ng-style="{height: (condition?'initial':'inherit')}"></div>

answered Jul 4, 2016 at 12:06

MeTe-30

2,5422 gold badges23 silver badges31 bronze badges

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

5 Comments

user3122648 Over a year ago

This condition is set in my angular js code. so how can I set it from here?

MeTe-30 Over a year ago

@user3122648 what condition exactly do you mean? condition in ng-style can accept expression!

user3122648 Over a year ago

I', trying to do it in my Javascript code. so <div ng-style="{height:myStyle}"></div> that I want to chaneg it from Js. in which myStyle is a scope.

dfsq Over a year ago

This is pretty bad solution. Avoid using ngStyle for such things. ngClass should be used here.

user3122648 Over a year ago

So would you pelase help me using it? becasue if I use ng-class how can I apply my css class?

Collectives™ on Stack Overflow

using angular to modify css class properties

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related