在ui-bootstrap typeahead中处理具有有意义键的对象

Question

Angular ui-bootstrap typeahead是一个很棒的库,我喜欢它模仿Angular select指令中的语法这一事实.似乎这种模仿并不完美.我是否正确地说我不能将此对象用作预先输入的来源？

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只适用于数组作为其源.

从文档:

支持的表达式是:

• sourceArray中值的标签
• 在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;
};

这不是最通用的功能,但您可以考虑使其更通用,具体取决于您自己的数据.

工作演示