Angular UI-Bootstrap 在 table 中提前输入

Question

确实是一个简单的问题，但是我如何设置预输入以在 table 中工作，而该 table 与我的预输入不同？

例如，我在 table 中有一个外键，我想让用户 select 这个键基于外键主 table 中各自的 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>

在这个例子中，我希望用户看到 "Foreign Key (As Name)" 作为名称值而不是 ID 值。诀窍是我还希望基础值是 ID 并将其映射为匹配原始值，如 ng-model 所通知的那样。

更新：另一个与前一个问题一致的问题是如何设置我的 ng-model 以显示 ForeignKeyTable.ForeignKeyName 代替 PrimaryTable.ForeignKeyID？

这类似于（我想象的）uib-typeahead 如何匹配 ForeignKeyTable.ForeignKeyID 和 ForeignKeyTable.ForeignKeyName 但是有两个单独的 tables?

我想要的是能够把 ng-model: PrimaryTable.ForeignKeyID as ForeignKeyTable.ForeignKeyName

Answer 1

第一件事是每次用户在预输入中选择值时更新 PrimaryKeyTable 行。您必须捕获所选项目并将其 ForeignKeyId 值手动分配给 PrimaryTable 行。这样做的方法是将 typeahead-on-select 指令添加到您的 typeahead 并将其绑定到为您分配值的函数。

看起来像这样：

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;
}

下一步是显示 name 属性行的 ForeignKeyTable 行的值，该行对应于 PrimaryKeyTable 中的 ForeignKeyId。由于我们必须过滤 ForeignKeyTable 才能找到 suitable 项，因此最好将该逻辑放在控制器中。由于我们要在多行中显示相应的名称，因此我们必须分别过滤每一行的 ForeignKeyTable 。这就是 ng-controller for ng-repeat 派上用场的地方。我们要做的是为 ng-repeat 生成的每个 table 行绑定新的控制器，并在该控制器中放入一些逻辑。在 HTML 中，它看起来像这样：

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

而且我们必须在 JS 文件中定义新的控制器：

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

现在我们可以为 table 中的每一行设置单独的逻辑。所以这是一个过滤 ForeignKeyTable 以找到相应项目并显示其名称的地方。

由于整个代码有点大，我把它放在 plunker 中： http://plnkr.co/edit/xccgnpxoPHg6vhXWPwZn?p=preview

看看你能用它做什么。

Angular UI-Bootstrap 在 table 中提前输入

Angular UI-Bootstrap typeahead in table

html

angularjs

angular-ui-bootstrap

angular-ui-typeahead