角度预输入过滤器错误“未定义不是函数”

Question

我在这里有一个有效的 plunkr：plunkr，它定义并使用了一个过滤器，该过滤器将一个项目附加到预先输入的建议列表中。当我尝试将其合并到我的项目中时，它会在过滤器周围引发错误。这是我的代码：

html:

<div class="input-group" ng-controller="TypeaheadCtrl">
            <input type="text" ng-model="search" placeholder="Search for vendors or products" class="form-control"
               ng-bind-html="match.label | typeaheadHighlight:query"
              typeahead="product for product in getProductSuggestions($viewValue) | filter:$viewValue | finalAppend:$viewValue">

脚本：

var app = angular.module('clientApp')
app.controller('TypeaheadCtrl', function ($scope, $http, StateService) {
    $scope.getProductSuggestions = function(val) {
        return $http.get(StateService.getServerAddress() + "search/autocomplete?q=" + val
            ).then(function(response){
            return response.data.products;
        });
    };
  })

app.filter('finalAppend', function($sce){
      return function(array, value){
        array.push(  // error: undefined is not a function!
            $sce.trustAsHtml('Look for <b>' + value + '</b> in other shops')
        ); 
        return array;
      }
})

提前致谢。

编辑：最后我刚刚摆脱了过滤器，当我得到结果时，我将最后一件事附加到承诺本身。

Answer 1

问题是函数getProductSuggestions 没有检索数组。那是因为该函数正在发出一个 asinc 请求，并且您在 then 承诺的函数中设置了 return。

你需要修改你的代码。

在你看来，这样做：

<input type="text" ng-model="search" placeholder="Search for vendors or products" 
  class="form-control" 
  ng-change="updateProductSuggestions(search)" 
  ng-bind-html="match.label | typeaheadHighlight:query"
  typeahead="product for product in productSuggestions | filter:$viewValue | finalAppend:$viewValue">

在你的控制器中这样做：

app.controller('TypeaheadCtrl', function ($scope, $http, StateService, $timeout) {
    $scope.productSuggestions =[];
    $scope.updateProductSuggestions= function(val) {
        return $http.get(StateService.getServerAddress() + "search/autocomplete?q=" + val
            ).then(function(response){
            $timeout(function(){
                  $scope.productSuggestions = response.data.products;
            });
        });
    };
  })

另外，请确保您在 response.data.products 中获得的是一个有效的数组。

最后，您还可以像这样改进您的$filter：

app.filter('finalAppend', function($sce){
      return function(array, value){
        if(!(array && value))
            return array;
        array.push(
            $sce.trustAsHtml('Look for <b>' + value + '</b> in other shops')
        ); 
        return array;
      }
})