0

So I have a text area defined with an ng-list that will separate the elements in an array into their own line.

  <textarea data-ng-model="names" data-ng-list="&#10;" data-ng-trim="false"></textarea>

I have a button that will add things to the names array and I want it to show up in the textarea as well. 

<button data-ng-click='addPlayer()'>Add</button>

$scope.addPlayer = function() {
  $scope.names.push('HODOR' + n++);
}

Unfortunately the textarea will not update when more elements are added to the array, even if they are still stored in the array. Is their anyway I can force that to happen? I tried using $scope.$apply and that didnt work. Here is a plunker showing the error. https://plnkr.co/edit/gaLtvWw3Odhfngrhkitf?p=preview

IFM
  • 1
  • 1

1 Answers1

0

You may want to take a look at this:

Cannot get textarea value in angularjs

Using $scope.$apply wont work, the textarea is a directive and:

AngularJS will look for that variable in the scope of the directive. It is not there and thus he walks down to $parent. The variable is present there and the text is inserted into the textarea. When changing the text in the textarea, Angular does NOT change the parent's variable. Instead it creates a new variable in the directive's scope and thus the original variable is not updated.

Community
  • 1
  • 1
Danny Sandi
  • 657
  • 7
  • 27
  • So if I am understanding this correctly, I should change data-ng-model="names" to data-ng-model="$parent.names", but doing so just completely disconnects the textarea from the array. Am I missing something here? – IFM Sep 01 '16 at 17:01
  • @IFM use controllerAs : controller: "MyController", controllerAs: "myc", Then set the value in your controller: angular.module('myApp').controller('MyController', function () { this.myText = 'Dummy text'; }); And then bind it directly to the property of your controller using the controller as identifier: – Danny Sandi Sep 01 '16 at 21:24