angular-ui typeahead 选择 id 而不是对象

Apple

使用Angular开发Web应用程序时，经常会遇到需要使用自动完成（Typeahead）功能的情况。Angular-UI库提供了一个非常强大的Typeahead指令，使得在输入框中输入关键字时，可以实时显示相关的选项供用户选择。但是，默认情况下，Typeahead指令会将用户选择的选项作为对象返回，而不是我们想要的选项的ID。那么，我们应该如何在Typeahead中选择ID而不是对象呢？

要实现这个功能，我们需要自定义Typeahead指令的模板和controller。在模板中，我们可以使用Angular的ng-model指令将选项的ID绑定到一个作用域变量中。在controller中，我们可以使用Typeahead的$watch函数，监听选项的变化，并将选项的ID保存到作用域变量中。

以下是一个简单的示例代码，演示了如何在Typeahead中选择ID而不是对象：

html
<input type="text" ng-model="selectedItemId" uib-typeahead="item.id as item.name for item in items | filter:$viewValue">

在上面的代码中，我们使用了Angular的ng-model指令将选项的ID绑定到了一个名为selectedItemId的作用域变量上。在Typeahead指令中，我们使用了item.id as item.name的语法，将选项的ID作为ng-model的值，而将选项的名称显示在输入框中。items是一个包含所有选项的数组，$viewValue是输入框中的值，filter是一个过滤器，用于根据输入的关键字过滤选项。

案例代码示例：

html
<div ng-controller="TypeaheadCtrl">
  <input type="text" ng-model="selectedItemId" uib-typeahead="item.id as item.name for item in items | filter:$viewValue">
</div>
<script>
  angular.module('myApp', ['ngAnimate', 'ui.bootstrap'])
    .controller('TypeaheadCtrl', function($scope) {
      $scope.items = [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
        { id: 4, name: 'Grape' },
        { id: 5, name: 'Mango' }
      ];
    });
</script>

在上面的代码中，我们创建了一个TypeaheadCtrl控制器，在控制器中定义了一个名为items的数组，包含了一些水果的选项。在Typeahead的模板中，我们使用了TypeaheadCtrl控制器中的items数组，并将选项的ID绑定到了selectedItemId作用域变量上。

通过这种方式，我们可以在Typeahead中选择ID而不是对象。这对于处理复杂的数据结构或者需要与后端API进行交互的情况非常有用。希望这个示例代码能够帮助你更好地理解如何在Angular-UI的Typeahead中选择ID而不是对象。