0

<input>ユーザーが新しい項目を入力したいときに行を動的に追加したい状況があります。以下に示すように、ユーザーが [入力項目の追加] ボタンをクリックすると、ユーザーがテキストを追加できる新しい入力要素が追加されます。

ここに画像の説明を入力

$scope.itemsの各入力要素値をモデル(配列)に関連付けようとしていますapp.js。私のでは、を使用してindex.htmlをロードします。私が理解していないのは、各入力/行を として定義されたモデルによって自動的に追加および管理する方法です。$scope.itemsng-repeat$scope.items

各入力要素を配列に関連する ng-model にマップすることは可能itemsですか? または、この状況でディレクティブを使用する必要がありますか?

完全なコードとランタイムは、ここの Plunker にあります(奇妙な出力を表示できるようにするため)。

からのスニペットindex.html:

<body ng-controller="MainCtrl">
  <button ng-click="addInputItem()">+ Add Input Item</button>
  <div ng-repeat="item in items">
    <input ng-model="items" type="text" value="{{item}}" size="40">
  </div>
  <pre>items = {{items | json}}</pre>
</body>

app.jsコード:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = ['First Item', 'Second Item'];
  $scope.addInputItem = function() {
    $scope.items.push('');
  };
});
4

2 に答える 2

2

最初の問題は、入力ボックスのバインドにあります。入力ボックスを囲むためng-repeat、各入力ボックスにはitemバインドできる値があり、それが本来あるng-modelべきものです。value属性には何も割り当てないでください。

<input ng-model="item.value" type="text"  size="40">

その変更を行うと、少なくとも入力ボックスに項目が表示されます。ただし、ボックスに入力しても、基になる配列は更新されません。それが2つ目の問題です。

ディレクティブは、ng-repeatプロトタイプとしてコントローラーからスコープを継承します (スコープの詳細については、こちらを参照してください)。アイテムはプリミティブ文字列であるため、要素ng-repeatはコントローラーからデータのコピーを効果的に取得し、ボックスに入力すると、コントローラー内の実際のデータではなく、それらのコピーが更新されます。

これを修正するには、項目を文字列の配列ではなくオブジェクトの配列にします。

$scope.items = [
  {value:'First Item'},
  {value: 'Second Item'}
];

次に、次のようにテキストボックスをバインドします。

<input ng-model="item.value" type="text"  size="40">

これがどのように機能するかを示すプランカーです。

于 2014-06-02T02:39:44.097 に答える
1

これは確かに可能です。この更新されたplnkrをチェックしてください

配列をプロパティを持つオブジェクトの配列 (文字列ではない) に更新し、text入力を次のように変更しました。

<input ng-model="item.text" type="text" size="40">
于 2014-06-02T02:38:32.280 に答える