0

For a project I'm working on, we want to create an offer module where users can generate an offer from dynamic values. This module has a preview in html and can be downloaded as an pdf version, which is sent to a customer.

A html page is generated with all the data provided. This is done with ng-model in the view. Next we simulate multiple pages with jQuery by checking for each element if it is outside a page (each page has a min and max-height of 29,7cm). This functionality is already fixed, so we know this works.

The problem is that we want to check, when a user types in the textarea, if the textarea flows outside the page and if so, we want to cut the textarea where the overflow is happening and create a new textarea with jQuery and fill it with the remaining characters with ng-model.

We've looked into splitting all characters into an array, but no luck so far with incorporating this into the ng-model. First approach, Second approach

So the question is, is it possible to check if the overflow happens and if so, create a new textarea with the same ng-model? Any help is greatly appreciated.

Community
  • 1
  • 1
Mathijs Rutgers
  • 785
  • 4
  • 20
  • Is this text that is overflowing all part of one property? If so I would simple create a directive that handles the visuals for you. Also consider using the content-editable attribute on a div instead of the textarea. – Cory Silva Feb 22 '16 at 18:14
  • What exactly do you mean by part of one property? This is the structure of the textarea: – Mathijs Rutgers Feb 22 '16 at 18:25
  • What about the text area on the second page? – Cory Silva Feb 22 '16 at 19:28

1 Answers1

1

Yes it is possible, I have created a base sample how to track the overflow and append new textarea .

Check the Fiddle

http://jsfiddle.net/88TzF/559/

app = angular.module('myApp', []);


app.directive("scrolls", function ($window) {
return {
  restrict : 'C',
  link : function(scope, element, attrs) {

  console.log(element);
    angular.element(element).bind("scroll", function() {
    console.log(this.scrollTop);
    var newarea = angular.element(document.getElementById('newarea'));
         if(this.scrollTop > 0 )
         {

          var appendTextbox= '<textarea width="200px" class="scrolls"  style="height:130px;overflow-y:scroll "></textarea>';
           newarea.append(appendTextbox);
           var childrens = newarea.children();
           var  textList = angular.element(document.getElementsByClassName('scrolls'));

           var tofocus = textList[textList.length-1];
           console.dir(textList.length);
           angular.element(tofocus).attr('autofocus','true');

         }
    });
    }
}; });
Raja Mohammed
  • 250
  • 2
  • 12