Rajesh B Rajesh B - 2 years ago 279
Javascript Question

Inserting text at Current Cursor position in Textarea Using AngularJs Ng-Click

We are trying to implement like below requirement.
Click of a button some text will be generated and it will be added into textarea.
Button is using Ng-Onclick.

Button Code is below.

<input type="submit" value="Add to form" class="btn btn-primary" ng-click="addToFormID($index)" />

But many buttons will be there like if am adding 4 components 4 buttons will be there to generate the formula.

and Here is my TextArea Code:

<textarea id="summarisationFormula" ng-model="vm.Kpi.SummarisationFormula" ng-change="setSummarisationFormulaDynamic()" cols="100" rows="4"></textarea>

and Here is my Script.

$scope.addToFormID = function(index){
if( $scope.vm.model.SummarisationForm==null)
$scope.vm.model.SummarisationForm ="["+ $scope.vm.model.CounterDependencies[index].NeName+":{"+$scope.vm.model.CounterDependencies[index].DbId+","+$scope.vm.model.CounterDependencies[index].VersionId+"}]";

$scope.vm.model.SummarisationForm +="["+ $scope.vm.model.CounterDependencies[index].NeName+":{"+$scope.vm.model.CounterDependencies[index].DbId+","+$scope.vm.model.CounterDependencies[index].VersionId+"}]";

We can see that in else part $scope.vm.model.SummarisationForm += so it will + the next formula to previous one so i wants to modify this one and needs to add the content where i am keeping the cursor.

Now What ever I am clicking it is adding it to the end of the content , If am entering enter key keeping cursor into first line of the next line also it is adding it to the same line which already text is there so i wants to find the cursor position and insert into the text where exactly keeping cursor or entering enter key position.

I am very new to angular js so please help me with basic idea with button how can i implement and script modification how can i do it.?

Edit : It is ASP.NET MVC5 Applicaiton.

If you need further more details please let me know.

Thanks in advance to all.

Answer Source

Here is the hero which my issues was resolved. Who ever it is really great that he solved my problem.

and What exactly done is I created directive element as mentioned in this link and called that directive in my view .

Boom it worked.


 app.directive('myText', ['$rootScope', function($rootScope) {
 return {
 link: function(scope, element, attrs) {
  $rootScope.$on('add', function(e, val) {
    var domElement = element[0];

    if (document.selection) {
      var sel = document.selection.createRange();
      sel.text = val;
    } else if (domElement.selectionStart || domElement.selectionStart === 0)           {
      var startPos = domElement.selectionStart;
      var endPos = domElement.selectionEnd;
      var scrollTop = domElement.scrollTop;
      domElement.value = domElement.value.substring(0, startPos) + val +        domElement.value.substring(endPos, domElement.value.length);
      domElement.selectionStart = startPos + val.length;
      domElement.selectionEnd = startPos + val.length;
      domElement.scrollTop = scrollTop;
    } else {
      domElement.value += val;


View Calling like this,

directive name is , myText.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download