配列インデックスが動的に決定される配列内の特定のアイテムに対して双方向のデータバインディングを行うにはどうすればよいですか?

Tony_Henrich

データベースからのJavascript動的配列があるとしましょう。

customers = [{'id':1, 'name':'John'},{'id':2, 'name':'Tim}, ...]

および入力:

<input type='text' name="forJohnOnly" ng-model="customers[0].name" />

<input type='text' name="forTimOnly" ng-model="customers[1].name" />

配列はソートされたデータベースから取得され、Johnは常に最初のアイテムです。これは機能しますが、UIを更新せずにデータベースの並べ替え順序を変更する可能性があり、最初の入力にTimの名前が含まれているため、これは気に入らないのです。これと同じ配列がバックエンドに送り返され、データベースに保存されます。

その目的のために追加の配列を作成したり、2つの配列間でコピーしたりせずに、正しいインデックスが動的に決定される以下のようなことをしようとしています。

<input type='text' name="forJohnOnly" ng-model="customers[where customers.id=1].name" />
<input type='text' name="forTimOnly" ng-model="customers[where customers.id=2].name" />  (need to use id because name can be updated)

何か案は?

更新:
データが配列内にある間、テキストボックスはグリッドなどの均一なレイアウトではありません。

Saeed

IDを受け取り、オブジェクトを返す関数を記述します。このようなもの

function getRow(id) {
    customers.forEach(itm => if(itm.id == id){ return itm; });
}

そしてそれを次のようなHTMLで使用します

<input type='text' name="forJohnOnly" ng-model="getRow(customer.id).name" />

またはng-repeatこのようなものを使用し

<div ng-repeat="customer in customers">
    <input type='text' name="{{customer.name}}Only" ng-model="customer.name" />
</div>

そして、customers配列を必要な順序で並べ替えるだけです!

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ