javascript - 在 ui-bootstrap typeahead 中使用有意义的键处理对象

Question

Angular ui-bootstrap typeahead 是一个很棒的库，我喜欢它模仿 Angular 内部语法的事实 select directive .不过，这种模仿似乎并不完美。我是否正确理解我不能将此对象用作预输入的来源？

var myObject= 
{
       '41': { term: 'cell morphological classification specialist'},
       '42': { term: 'classification specialist'},
       '43': { term: 'cell electrophysiological classification specialist'},
       '44': { term: 'cell morphological reconstruction specialist'},
       '45': { term: 'cell electrophysiology recording specialist'},

}

如果我使用 Angular select 指令，我将使用以下结构来加载此对象作为可能的选项:

select id as details.term for (id , details) in myObject

这是否意味着我必须在我的应用程序中避免此类对象并改用这种形式？

 [
   {id: '41', term: 'cell morphological classification specialist'},
   {id: '42', term: 'classification specialist'},
   {id: '43', term: 'cell electrophysiological classification specialist'},
   {id: '44', term: 'cell morphological reconstruction specialist'},
   {id: '45', term: 'cell electrophysiology recording specialist'},
 ];

Answer 1

似乎 ui.bootstrap 的 typeahead 只适用于数组作为其来源。

来自文档:

Supported expressions are:

• label for value in sourceArray
• select as label for value in sourceArray

现在您可以使用 typeahead 做的一件事是调用一个函数来返回一个数组:

    <input type="text" ng-model="selected3" typeahead="object.term for object in transformationFunction(myObject, $viewValue) | filter:{term:$viewValue}""  class="form-control">

函数

$scope.transformationFunction = function(object, val) {
  var newArray = [];
  for(var key in object) {
    newArray.push({id: key, term: object[key].term});
  }
  return newArray;
};

这不是目前最通用的函数，但您可以根据自己的数据想办法让它更通用。

Working demo