尝试1

Question

我正在使用angularstrap typeahead指令。它与单个对象json值一起正常工作，但在用json对象数组替换json时它不起作用。

Demo Json：

typeahead= ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia"];

<input type="text" ng-model="typeaheadValue" bs-typeahead="typeahead">

上面的代码工作正常。

我的JSON对象数组：

typeahead = [
    {id: 1, name: 'name1', email: 'email1@domain.com'},
    {id: 2, name: 'name2', email: 'email2@domain.com'},
    {id: 3, name: 'name3', email: 'email3@domain.com'}
];

$scope.typeaheadFn = function(query) {
   return $.map($scope.typeahead, function(contacts) {
      return contacts;
   });
}

<input type="text" ng-model="typeaheadValue" bs-typeahead="typeaheadFn">

请给我一些解决方案。

Answer 1

我相信你想把你的物品映射到一个字符串列表。

尝试：

$scope.typeaheadFn = function(query) {
    return $.map($scope.typeahead, function(contact) {
        return contact.name;
    });
}

（我应该补充一点，我目前被类似的东西困住）

Answer 2

如果你有，例如：

items = [
    {id: 1, name: 'name1', email: 'email1@domain.com'},
    {id: 2, name: 'name2', email: 'email2@domain.com'},
    {id: 3, name: 'name3', email: 'email3@domain.com'}
];

您将需要：

<input type="text" bs-typeahead ng-model="selectedItem" ng-options="item.name for item in items|orederBy:'name'|filter:{name:$viewValue}:optionalCompareFn"></input>

如果从ng-options中排除过滤器，则会对item对象的每个属性进行匹配，因此如果您希望在一个属性上完成匹配，请添加filter:{propName:$viewValue}。此外，如果您排除optionalCompareFn，则会应用与角度的默认比较，但您可以添加自定义的比较（在$scope上），签名（actual是项目的属性值在过滤器中说明，而不是整个对象。）

optionalCompareFn(expected,actual){ return /compare and return true or false/}

Answer 3

尝试1

在经历了巨大的挫折之后，我终于得到了这种半工作。

显示所需文字的简便方法是每个项目都有toString方法。

你可能有像

这样的东西

typeaheadData = [
  {id: 1, text: "abc", toString: function() { return "abc"; }},
  {id: 2, text: "def", toString: function() { return "def"; }}
]

然后您将在弹出的选项中看到正确的文本，但匹配将无法正常工作（窗口小部件显示的项目与用户在框中输入的文本不匹配）。

为了实现这一目标，我使用了filter当前git版本中添加的新angular-strap选项。请注意，它甚至不在存储库中的预构建dist/angular-strap.js文件中，您需要自己重建此文件以获取新功能。（截至提交ce4bb9de6e53cda77529bec24b76441aeaebcae6）。

如果您的bs-typeahead小部件如下所示：

<input bs-typeahead ng-options="item for item in items" filter="myFilter" ng-model="myModel" />

然后，只要用户输入密钥，就会调用过滤器myFilter。它使用两个参数调用，第一个是传递给typeahead的整个列表，第二个是输入的文本。然后，您可以循环遍历列表并返回所需的项目，可能是通过检查文本是否与项目的一个或多个属性匹配。所以你可以像这样定义过滤器：

var myApp = angular.module('myApp', ['mgcrea.ngStrap'])
  .filter('myFilter', function() {
    return function(items, text) {
      var a = [];
      angular.forEach(items, function(item) {
        // Match an item if the entered text matches its `text` property.
        if (item.label.indexOf(text) >= 0) {
          a.push(item);
        }
      });
      return a;
    };
  });

不幸的是，这仍然不太正确;如果通过单击选择项目，则text参数将是项目列表中的实际对象，而不是文本。

尝试2

我仍然发现这太烦人了所以我做了一个angular-strap（https://github.com/amagee/angular-strap）的分叉，让你这样做：

typeaheadData = [
  {id: 1, text: "abc"},
  {id: 2, text: "def"}
]

//...

$scope.myFormatter = function(id) {
   if (id == null) { return; }
   typeaheadData.forEach(function(d) { 
       if (d.id === id) { 
           return d.text; 
       }
   });
};

<input bs-typeahead ng-options="item for item in items" ng-model="myModel" 
  key-field="id" text-field="text" formatter="myFormatter" />

无需使用toString方法或过滤器。 text-field是用户看到的内容，key-field是写入模型的内容。

~~（不！如果不经过视图更新模型，仍然无效。）~~

需要formatter选项，因此当您将模型值设置为关键字段时，窗口小部件可以找出要显示的正确文本。

带有json对象数组的angularstrap typeahead不起作用

3 个答案:

尝试1

尝试2