使用 uib-typeahead 过滤的 AngularJs 不起作用

Question

我有一个使用 angular uib-typeahead 的应用程序。

通过ajax调用远程加载数据。

我需要过滤结果以仅显示包含 $viewValue 字符串的“名称”的结果。

这是我的代码。我的问题是数据永远不会被过滤。

我做错了什么？

//标记

<input type="text" ng-model="modelo.tuss" placeholder="Select TUSS" 
    uib-typeahead="item as item.name for item 
    in getTabelaTUSS($viewValue) | filter:{name:$viewValue}" 
class="form-control">

//控制器

angular.module("clinang").controller('exameCtrl',['$scope', function($scope) {
      var prof=[{"id":1,"name":"John Prof"},
      {"id":2,"name":"Mary Prof"}];

      $scope.getTabelaTUSS = function(val) {
        return dataService.getTabelaTUSS().then(function(response){
             return prof; //only to simulate results to test
    });
  };

}]);

更新的控制器：

//first option - geting rid off view filter and making local filter in controller
angular.module("clinang").controller('configAgendaAddProcedimentosCtrl',['$scope','dataService','$state','$filter',function($scope,dataService,$state,filter){
      $scope.getTabelaTUSS = function(val) {
        return dataService.getTabelaTUSS().then(function(response){
                 return filterFilter(response.data, val); 
        });
      };
}]);

 //second option - using view filter and no local filter in controller
 //I also tried without success
angular.module("clinang").controller('configAgendaAddProcedimentosCtrl',['$scope','dataService','$state','$filter',function($scope,dataService,$state,filter){
      $scope.getTabelaTUSS = function(val) {
        return dataService.getTabelaTUSS().then(function(response){
                 return response.data; 
        });
      };
}]);

Answer 1

如果您用return prof; 替换以下块，它将按我在​​this Plunker 中演示的预期工作

return dataService.getTabelaTUSS().then(function(response){
  return prof; //only to simulate results to test
});

你的return 语句的问题是它返回一个由dataService.getTabelaTUSS().then() 调用返回的promise 对象。要解决此问题，不要在 then 中返回 prof，而是将 prof 分配给范围变量并在您的视图中使用它。

Answer 2

您正在调用 dataService.getTabelaTUSS() 方法，但您从未在控制器中注入 dataService。

在你的控制器中注入dataService，如下所示。

angular.module("clinang").controller('exameCtrl',['$scope','dataService' function($scope,dataService) {
  var prof=[{"id":1,"name":"John Prof"},
  {"id":2,"name":"Mary Prof"}];

   $scope.getTabelaTUSS = function(val) {
      return dataService.getTabelaTUSS().then(function(response){
          return prof; //only to simulate results to test
    });
  };

}]);

注意：不要忘记在您的 HTML 代码中包含 dataService 服务文件。

此外，如果我们看到您没有使用 dataService.getTabelaTUSS() 方法 response 的代码，而是返回了 profobject。因此，如果您不需要来自服务的数据，请按如下方式更新您的方法。

$scope.getTabelaTUSS = function(val) {
   return prof;
}