1

I would like to do something like this in angularJS:

<div ng-class="{ 'hover-accordion': angular.element(this).children().length >= 3 }">
    <div ng-if="showA">...</div>
    <div ng-if="showB">...</div>
    <div ng-if="showC">...</div>
    <div ng-if="showD">...</div>
    <div ng-if="showE">...</div>
</div>

This means that if the parent div has more then 3 childs, I want the class 'hover-accordion'.
Is it possible?

Improve this question

2 Answers 2

Reset to default
2

Mostly templates display a model (data from server). Use this model to alter the view. I wouldn't rely on the underlying DOM to manipulate the view. Sure you can but this wouldn't be the angular way. So instead of checking the length of children of a dom element, check the length of the model data that is rendered by the view.

Here is a working plunker of what I mean: http://plnkr.co/edit/SzuAO1BTapelQYI6WFJa?p=preview

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

3 Comments

The ng-repeat used, is only for the demo. I had to guess what you try to accomplish and I thought you wanted some kind of accordion. Maybe if you provide more details on what you want to do, I could help you more.
I don't have an array that holds all the data.
how do you get the data from the server? Or is the template static?
-1

The children are made by PHP (or other server side code) ? Calculate and add the class with PHP. But if children are made with angular model, juste use the length of the model.

Right ?

Improve this answer

1 Comment

I am using AngularJS templates without server side rendering. This is single page application! Which length?? of which model??

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.