2

区切られた文字列とデータ バインディングを使用したオブジェクトの配列との間で変換するにはどうすればよいですか?

ng-list文字列の配列で動作します。しかし、配列内のテキストを編集できるように、テキスト プロパティを区切りたいオブジェクトの配列があります。

文字列の配列で動作します:

$scope.arrayStrings = ["one", "two", "three"];

<textarea ng-model="arrayStrings" ng-list="&#10;" ></textarea>

これをオブジェクトで動作させるにはどうすればよいですか:

$scope.arrayObjects = [{
  text: "one",
  selected: true
}, {
  text: "two",
  selected: true
}, {
  text: "three",
  selected: true
}];

<textarea ng-model="arrayObjects" ng-list="&#10; | text" ></textarea>

これがプランカーのデモです

私が考えたアイデアの 1 つは、文字列の配列で ng-list を使用し、それをオブジェクトの配列にマップすることでした。$watch文字列配列が変更されるたびに、オブジェクト配列を更新するためにa を使用します。ただし、配列が更​​新されるたびにオブジェクトの他のプロパティが上書きされるため、これでも不十分です。(以前のプランカーのリビジョンでのデモ)

$scope.$watch('arrayStrings', function() {
  $scope.arrayObjects = $scope.arrayStrings.map(function(s){
    return {
      text: s,
      selected: true
    }
  });
})

アップデート：

Krzysztof の提案ng-listを使用している場合でも、使用時にまだ問題があるようです:

toString: function() { return s }

メソッドをオーバーライドするtoStringと、オブジェクトのセットが最初に表示されるときに役立ちますが、何かを入力するとすぐに、ng-listオブジェクトのセットが文字列の配列に変換されますtoString。

私がやろうとしていることを明確にするために。編集可能なタイトルがあり、選択することもできるオブジェクトのリストが本当に必要です。タイトルが変わったり、項目が追加されたりしても、選択を保持したい。

ここに示す別のプランカーがあります

スクリーンショット

4

2 に答える 2

1

Krzysztof の提案は役に立ちましたが、オブジェクトの配列を常に文字列の配列に変換し、スコープにあるオブジェクトをオーバーライドするng-listため、バインドをうまく処理できませんでした。ng-list

この場合、最も簡単なことは、ng-list から、ほとんどのタグ付けライブラリのようにオブジェクトを完全にサポートするものにアップグレードすることでした。

次のように ngTagsInput を実装しました。

HTML :

<tags-input ng-model="arrayObjects" display-property="text"></tags-input>

JavaScript :

$scope.arrayObjects = [
  { "text": "one"   , "selected": false },
  { "text": "two"   , "selected": false },
  { "text": "three" , "selected": false }
];

このようにして、各オブジェクトには、テキスト プロパティが表示される独自の要素が与えられ、入力内に存在するようにすべて一緒にフォーマットされます。1 つのオブジェクトを変更すると、その 1 つの要素が更新されるだけです

Pluner でのデモ

于 2014-07-27T02:28:24.660 に答える