Return 每一个数据，不仅仅是输入的数据

Question

我正在使用 ui.bootstrap 预先输入

uib-typeahead="search as search.name for search in vm.searching($viewValue)"

通过 $http.get 从数据库

获取数据

vm.searching = function() {
      return $http.get('http://localhost:3000/api/allcoaches')
      .then(function(response) {
        return response.data;       
    }); 
};

搜索指令如下所示

.component('searchbox',{
    restrict: 'E',
    templateUrl: '/common/searchbox/searchbox.template.html',
    bindings: {
        text: '<'
    },
    controller: 'SearchBoxController',
    controllerAs: 'vm'
});

response.data

[{"_id":"57bc46dafd7aac680c908072","name":"a","price":3},
{"_id":"57bc46dcfd7aac680c908073","name":"b","price":4},
{"_id":"57bc46f9207a745c2494182c","name":"c","price":5},
{"_id":"57bc4771207a745c2494182d","name":"d","price":6}]

它只是转向显示数据中的每个对象，而不仅仅是在搜索框中键入的内容。就像我输入 'a' 时，它会在下拉列表中返回所有 'a,b,c,d' 。我做错了什么？

Answer 1

您没有在服务中进行任何过滤，您正在获取 API/allcoaches。将键入的值传递给服务并获得过滤结果或在您的控制器中进行过滤。

如果你在你的控制器中进行内存过滤，那么你不需要每次都点击服务。您可以一次获取所有教练（在此方法之外），然后在此方法中执行 $filter。

但我建议您在 api 和 return 过滤列表中进行过滤。

再次决定是在客户端还是在 api 中进行过滤取决于您的业务场景。如果您的数据库中有太多教练，请在 api 中进行过滤。如果数据量较少，则通过点击 api 获取所有教练，将该列表保留在视图模型属性之一中，然后从该内存列表中过滤。

Return 每一个数据，不仅仅是输入的数据

Return every single data, not just the typed one

twitter-bootstrap

angularjs

bootstrap-typeahead

angular-ui-bootstrap