web-dev-qa-db-ja.com

AngularUI-BootstrapのTypeaheadが「undefined」の「length」プロパティを読み取れません

Promiseを使用してAngularUI-Bootstrapから先行入力値を取得しようとすると、次のエラーが発生します。

TypeError: Cannot read property 'length' of undefined
  at http://localhost:8000/static/js/ui-bootstrap-tpls-0.6.0.min.js:1:37982
  at i (http://localhost:8000/static/js/angular.min.js:79:437)
  at i (http://localhost:8000/static/js/angular.min.js:79:437)
  at http://localhost:8000/static/js/angular.min.js:80:485
  at Object.e.$eval (http://localhost:8000/static/js/angular.min.js:92:272)
  at Object.e.$digest (http://localhost:8000/static/js/angular.min.js:90:142)
  at Object.e.$apply (http://localhost:8000/static/js/angular.min.js:92:431)
  at HTMLInputElement.Va.i (http://localhost:8000/static/js/angular.min.js:120:156)
  at HTMLInputElement.x.event.dispatch (http://localhost:8000/static/js/jquery-1.10.2.min.js:5:14129)
  at HTMLInputElement.v.handle (http://localhost:8000/static/js/jquery-1.10.2.min.js:5:10866)

私のHTMLタグは次のとおりです。

<input type="text" class="form-control" id="guestName" ng-model="name" typeahead="name for name in getTypeaheadValues($viewValue)">

私のgetTypeaheadValues関数を使用すると、次のようになります。

$scope.getTypeaheadValues = function($viewValue)
{
    // return ['1','2','3','4'];

    $http({
        method: 'GET',
        url: 'api/v1/person?name__icontains=' + $viewValue
    }).error(function ($data) {
        console.log("failed to fetch typeahead data");
    }).success(function ($data) {
        var output = [];
        $data.objects.forEach(function (person)
        {
            output.Push(person.name);
        });
        console.log(output);
        return output;
    });
}

AngularUI-Bootstrapが未定義であると不平を言っていることを理解していません。一番上のreturnのコメントを削除すると、値は正常に表示されます。 console.logsuccessの出力も、配列に期待するすべての値を返します。

AngularUI-Bootstrapが返された配列を認識しない原因となる何が欠けていますか？

javascriptangularjsangular-uiangular-ui-bootstrap
18
Evil Closet Monkey

この問題は2つありました。

1つ目は、promiseイベント（$http呼び出し）を返さなかったことです。 （@toboが指摘しているように）returnステートメントがないことが、エラーの直接の原因でした。ただし、配列ではなく、promiseを返す必要がありました。

2つ目は、AngularUI-Bootstrapで結果を取得するには、.thenではなく.successを使用する必要があるということです。

私は次の質問に出くわしました： サーバー側の最適化のために$ httpを介してangular-uiの先行入力をサーバーに関連付ける方法は？

これは私の関数呼び出しを以下に更新しました：

$scope.getTypeaheadValues = function($viewValue)
{
    return $http({
        method: 'GET',
        url: 'api/v1/person?name__icontains=' + $viewValue
    }).then(function ($response) {
        var output = [];

        console.log($data);

        $response.data.objects.forEach(function (person)
        {
            output.Push(person.name);
        });

        console.log(output);
        return output;
    });
}
22
Evil Closet Monkey

$ scope.getTypeaheadValuesは配列を返していません。 returnステートメントが非同期と呼ばれるコールバック関数 "success"にあるため、nullを返します。

多分これはうまくいくでしょう：

$scope.getTypeaheadValues = function($viewValue)
{    
    var output = [];
    $http({
        method: 'GET',
        url: 'api/v1/person?name__icontains=' + $viewValue
    }).error(function ($data) {
        console.log("failed to fetch typeahead data");
    }).success(function ($data) {            
        $data.objects.forEach(function (person)
        {
            output.Push(person.name);
        });
        console.log(output);        
    });
    return output;
}
2
T.Riemer