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'},

}

如果我使用了角度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;
};

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

<强> Working demo

Answer 2

实际上它不适用于物体您可以查看typeahead的source code：

angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap.bindHtml'])

  .factory('typeaheadParser', ['$parse', function ($parse) {

  var TYPEAHEAD_REGEXP = /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w\d]*))\s+in\s+([\s\S]+?)$/;

  return {
    parse:function (input) {

      var match = input.match(TYPEAHEAD_REGEXP);
      if (!match) {
        throw new Error(
          'Expected typeahead specification in form of "_modelValue_ (as _label_)? for _item_ in _collection_"' +
            ' but got "' + input + '".');
      }

      return {
        itemName:match[3],
        source:$parse(match[4]),
        viewMapper:$parse(match[2] || match[1]),
        modelMapper:$parse(match[1])
      };
    }
  };
}])

因此，您可以看到它使用RegExp来检查输入值。

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

2 个答案: