AngularJSを使用してテキストエリアに配列を生成するにはどうすればよいですか？

Question

function TodoCtrl($scope) { 
    $scope.delete = function(i){ 
     $scope.myArray.splice(i, 1); 
    } 
    $scope.myStr = 'aaaa\nbbbb\nccccc'; 
    $scope.$watch('myStr', function(myStr){ 
     $scope.myArray = myStr.split('\n'); 
     console.log('$scope.myArray', $scope.myArray); 
    }); 
    $scope.$watch('myArray', function(e){ 
     if(e.length > 0){ 
      var string = ''; 
      for(var i = 0; i < e.length; i++){ 
       if(e[i] !== ''){ 
        string += e[i] + "\n"; 
       } 
      } 
      $scope.myStr = string;    
     } 
    }, true); 
} 

私はtextareaを作成しようとしています。入力は、arrayにバインドされています。エントリは、テキストの各行に対応しています。

また、要素が削除されるたびにtextareaに対応するテキストも削除する必要があります。

どのように達成できますか？ $ scope関数$watchを使用しようとしていますが、textareaにテキストを入力するときに問題が発生していますが、常に1文字が生成されます。

Jsfiddleはよりよい一見のため：配列から文字列を構築するとき https://jsfiddle.net/pf4v83mb/

Answer 1

あなたは、一つの小さなミスをした：エンド（jsfiddle）に不要な\nを追加しました。だからこそ、あなたがテキストボックスに文字を入力、空白の新しいアイテム（\n）配列に追加されている、それは、つまり、同じことが新しい行に行くのですかテキストボックスを強制的に：

$scope.$watch('myArray', function(e){  
    if(e.length > 0){ 
     var string = ''; 
     for(var i = 0; i < e.length; i++){ 
      if(e[i] !== ''){ 
       //'\n' not needed for last element 
       string += e[i] + (i == e.length - 1 ? '' : "\n"); 
      } 
     } 
     $scope.myStr = string; 

    } 
}, true);