AngularJS: How to hide an element when it's too big?

Question

See the link above. I want to hide the textarea when the width of the text area is over 400px. How can this be done?

you mean, you want to hide the text area when the browser is wider then 400px? — nycynik, Nov 28 '12 at 22:23
so you need to listen for the resize event of the textarea? http://stackoverflow.com/questions/5570390/resize-event-for-textarea — Liviu T., Nov 28 '12 at 22:40

score 2 · Accepted Answer · answered Nov 29 '12 at 03:17

As you're using Angular and you're dealing with view related code, you'd want to define a directive.

The code below is an example of what this directive would look like (written in CoffeeScript):

angular.module('yourAppName').directive('hideOnExceed', ->
  return {
    restrict: 'A', 
    link: (scope, element, attr) ->
      element.bind 'resize', ->
        if element.width() > 400
          element.hide()
        else
          element.show()
  }
)

Then simply define hideOnExceed as an attribute to the textarea tag:

<textarea ng-show="withinSize()" hideOnExceed>{{size}}</textarea>

AngularJS: How to hide an element when it's too big?

1 Answers1