表中的角度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

见你可以用它做什么。