How to force Angular to remove DOM elements

Question

I'm using absolute positioning to position hundreds of DOM elements. When I re-size my page, I'd like to have the columns expand. B/c I'm using Angular, existing DOM elements aren't repainted as the array doesn't change, just the screen does. How can I force Angular to reposition every DOM element? Do I have to remove them first? If so, how can I do this?

Answer 1

You want to know when the screen size changes and then trigger some changes in your angular code to get the columns to resize.

You can watch for screen size changes with code like this:

    angular.element($window).bind('resize', function() {
        scope.$apply(function() {
            applyHeight();
        });
    });

Angular.js: set element height on page load

As for changing the DOM elements, it sounds like this is more a CSS issue than one where they need to be removed. You should try to solve your whole problem using some kind of responsive-column layout like bootstrap, but if you must proceed as you are use ng-style

https://docs.angularjs.org/api/ng/directive/ngStyle

And compute the width of each element perhaps based on the width of the window.