2013-07-11 16 views
8

私には配列があるangularJSアプリケーションがあります。AngularJS形式の配列の値をテキストエリア

$scope.data[0] = x1; 
    $scope.data[1] = x2; 

とテキスト領域

<textarea ng-model="data"> </textarea> 

私はそのテキストエリアは、(カンマで区切られた)値X1、X2が含まれて見ることができます。私は別々の行に値を表示したい。つまり、すべての配列値はカンマではなく、改行文字で区切らなければなりません。このためにフィルタを記述する必要はありますか?

+0

Uは、フィルタを試すことができますし、それが動作しない場合は、もう一度尋ねる:)なぜこのソリューションを試してみませんでしたか? –

+0

私はx1、x2を返すために、配列のtoStringを行っていると思います。あなたはそれのためのフィルタを作成する必要があります。 – Chandermani

答えて

15

ng-modelが変数を入力値に変換して戻す方法を変更する指示文を書くことができます。私はちょうど私の頭の上にこれをオフに書いているので、それは正確に右だ場合、私は考えているが、このようなものは、それを行う可能性があります:

app.directive('splitArray', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attr, ngModel) { 

      function fromUser(text) { 
       return text.split("\n"); 
      } 

      function toUser(array) {       
       return array.join("\n"); 
      } 

      ngModel.$parsers.push(fromUser); 
      ngModel.$formatters.push(toUser); 
     } 
    }; 
}); 

そして、あなたはこのようにそれを使用することができます:

<textarea ng-model="data" split-array> </textarea> 
+1

フォーマッタとパーサのサンプルについては、この回答を参照することができます:http://stackoverflow.com/questions/11616636/how-to-do-two-way-filtering-in-angular-js –

15

これはng-listはまったく同じものです:それはngModelsパーサ/フォーマッタにフックとして

<textarea ng-model="someArray" ng-list="/\n/"></textarea> 

また、これは、入力の他のすべての種類の上で動作します。

このフィドルを参照してください:http://jsfiddle.net/xbYzT/1/

これに伴う問題は、そのNGリストは、常にそれが本当に双方向ではありません「」区切りとして、なると合流します。

+1

この問題の唯一の問題'ngList'はセパレータとして常に'、 'を使って既存の配列を結合し、ユーザが選択したセパレータを無視します。正規表現ではない場合でもそうです。 –

+0

Ted:はい、これは醜い問題です。本当に正規表現で分割を元に戻すことはできないので、修正するのは簡単ではありません。それを反映するようにコメントを更新しました。 –

+1

AngularJS 1.3はngSplitで正規表現のサポートを削除しているため、それは議論の対象になります。 –

11

角度でこれを行うにははるかに簡単な方法> =両方の方法を動作します1.3

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

Plunker

+1

これは本当により多くのアップフォースを必要とします。どのような素晴らしい答え。 –

+0

非常に良い眉! –

+0

@ AlisomMartins、おかげで、あなたの眉もかなりいいですね。 –

関連する問題