2

我正在使用 angularstrap typeahead 指令。它适用于单个对象 json 值，但在用我的 json 对象数组替换 json 时它不起作用。

演示 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">

请给我一些解决方案。

4

3 回答 3

1

例如，如果您有：

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}。此外，如果您 exclude optionalCompareFn，将应用来自 angular 的默认比较，但您可以添加您的自定义比较（在您的 上$scope），并带有签名（actual是项目的属性值，在过滤器中说明，而不是整个对象）。

optionalCompareFn(expected,actual){ return /compare and return true or false/}
于 2015-01-30T13:11:02.967 回答
1

我相信您想将您的项目映射到字符串列表。

尝试：

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

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

于 2013-08-15T20:46:31.233 回答
-1

尝试 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选项是必需的，因此当您将模型值设置为仅键字段时，小部件可以找出要显示的正确文本。

于 2014-03-05T04:31:22.953 回答