角度UI-ブートストラップの先読みテーブル

Question

本当に簡単な質問ですが、先読みとは異なるテーブルで動作するように先読みを設定するにはどうしたらいいですか？

たとえば、テーブルに外部キーがあり、外部キーのプライマリテーブルのそれぞれのNAME値に基づいてユーザーがこのキーを選択できるようにしたいとします。

コード例：この例では

<table class="table table-bordered table-hover table-striped rwd-table" id="page-wrap"> 
<thead> 
    <tr> 
     <th>Primary ID</th> 
     <th>Foreign Key (As Name)</th> 
    </tr> 
</thead> 
<tbody> 
    <tr ng-repeat="p in PrimaryTable" id="display"> 
     <td data-th="ID">{{p.PrimaryID}}</td> 
     <td> 
      <input id="ForeignKeyName" 
        type="text" 
        ng-model="p.ForeignKeyID" 
        uib-typeahead="f.ForeignKeyID as f.ForeignKeyName for f in ForeignKeyTable | filter:$viewValue"        
        class="form-control"> 
     </td>     
    </tr> 
</tbody> 

、私は、ユーザーが名前の値の代わりに、ID値として「（名前など）外部キー」を参照してくださいしたいと思います。トリックは、基になる値をIDにして、ngモデルによって通知された元の値に一致させるようにマッピングしたいということです。

UPDATE：前のバージョンと一致する別の質問は、PrimaryTable.ForeignKeyIDの代わりにForeignKeyTable.ForeignKeyNameを表示するようにng-modelを設定する方法です。

これは、uib-typeaheadがForeignKeyTable.ForeignKeyIDとForeignKeyTable.ForeignKeyNameとどのように一致するのか（2つの別々のテーブルと同じですか？）私が望むだろうか

はng-model: PrimaryTable.ForeignKeyID as ForeignKeyTable.ForeignKeyName

Answer 1

まず最初は、PrimaryKeyTable行、ユーザが先行入力で値を選択するたびに更新されます置くことができるようにすることです。選択したアイテムをキャッチして、ForeignKeyIdの値をPrimaryTableの行に手動で割り当てる必要があります。 これを行う方法は、あなたの先読みにtypeahead-on-selectディレクティブを追加し、それを値を割り当てる関数にバインドすることです。

それは次のようになります。

HTMLあなたのコントローラ内部

<tr ng-repeat="p in PrimaryTable" id="display"> 
    <td data-th="ID">{{p.PrimaryID}}</td> 
    <td> 
     <input id="ForeignKeyName" 
        type="text" 
        ng-model="selectedItem" <!-- could be anything really for we will not use it here --> 
        uib-typeahead="f.ForeignKeyID as f.ForeignKeyName for f in ForeignKeyTable | filter:$viewValue" 
        typeahead-on-select="onSelect($item, $model, $label, p)"        
        class="form-control"> 
    </td>     
</tr> 

$scope.onSelect = function($item, $model, $label, primaryKeyTableRow) { 
    primaryKeyTableRow.ForeignKeyId = $item.ForeignKeyId; 
} 

次のステップに対応しForeignKeyTable行のnameプロパティ値を表示することですForeignKeyId f各行にPrimaryKeyTableと書かれています。適切な項目を見つけるためにForeignKeyTableをフィルタリングしなければならないので、そのロジックをコントローラの中に入れることは良い考えです。対応する名前を表示する複数の行があるため、各行ごとにForeignKeyTableを別々にフィルタリングする必要があります。これはng-repeatのng-controllerが便利な場所です。ここでは、ng-repeatによって生成された各テーブル行に対して新しいコントローラをバインドし、そのコントローラ内にロジックを配置します。 HTMLでは、次のようになります。

<tr ng-repeat="p in primaryKeyTable" ng-controller="itemController"> 
    <!-- ... --> 
</tr> 

そして、我々は、JSファイルに新しいコントローラを定義する必要があります：

app.controller('itemController', function() { 
    // ... 
}); 

今、私たちはテーブル内のローごとに別々のロジックを持つことができます。だから、ForeignKeyTableをフィルタリングして対応するアイテムを見つけてその名前を表示する場所です。

全体のコードは、私がplunkerに入れてきたような大きさであるので： http://plnkr.co/edit/xccgnpxoPHg6vhXWPwZn?p=preview

は、あなたがそれで何ができるかを参照してください。