Update textarea rows via Angularjs

Question

I want to adjust the number of rows in a textArea on focus on remove them on blur. In addition upon focus I want to show a hidden div layer. My current solution is

<textarea class="form-control" rows="1" placeholder="Please enter text..." 
onfocus="this.rows=3" ng-focus="isVisible = !isVisible" onblur="this.rows=1" 
ng-blur="isVisible = !isVisible"></textarea>

As you can see from above I have to use two attributes, i.e. HTML onfocus to increase the rows and ng-focus to update isVisible (to show and hide the div). It works, but I was wondering if it's possible to increase and decrease the number of rows using ng-focus and ng-blur only.

Div layer I am showing and hiding

<div class="row" ng-show="isVisible" />

Thanks in advance

Answer 1

Basically you could use ng-attr-rows to set rows attribute value dynamically. You could have something like below.

Basically on each digest cycle ng-attr-* directive evaluate its expression, in your case * is rows, and add that evaluated value to rows attribute.

Markup

<textarea ng-model="test" 
   ng-attr-rows="{{row || '1'}}" 
   ng-focus="row=3" 
   ng-blur="row=1">
</textarea>

Demo Plunkr