表中的角度UI-Bootstrap typeahead

Question

真的很簡單的問題，但是我怎樣才能設置typeahead在一個不同於我的typeahead的表中工作的表中工作？

例如，我在表中有一個外鍵，並且我想讓用戶根據外鍵的主表中相應的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模型通知的原始值相匹配。

更新：另一個問題是，我已經符合前一個是如何設置我的ng模型來顯示ForeignKeyTable.ForeignKeyName代替PrimaryTable.ForeignKeyID？

這將是類似的（我想象）如何uib類型的頭匹配ForeignKeyTable.ForeignKeyID和ForeignKeyTable.ForeignKeyName但與兩個獨立的表？

我會的願望就是能​​夠把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屬性值f rom PrimaryKeyTable在每一行中。由於我們必須過濾ForeignKeyTable以找到合適的物品，因此將該邏輯放置在控制器內是一個好主意。對於我們想要顯示相應名稱的多行，我們必須分別過濾每行的ForeignKeyTable。這就是ng-controller爲ng-repeat派上用場。我們要做的就是爲由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

見你可以用它做什麼。