0

ここに作業中の 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;
      }
})

前もって感謝します。

編集:最後にフィルターを取り除き、結果を返すときにプロミス自体に最後のものを追加しています。

4

1 に答える 1

1

問題は、関数getProductSuggestionsが配列を取得していないことです。これは、その関数が asinc 要求を行っておりreturn、promise の関数にセットがあるためthenです。

コードをかなり変更する必要があります。

あなたの見解では、これを行います：

<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;
      }
})
于 2014-11-03T19:36:42.163 に答える