javascript AngularUI-ブートストラップのタイプヘッドは'未定義'の'長さ'プロパティを読み取ることができない




angular ui bootstrap tpls (3)

この問題は2つある。

最初は、私が約束事( $http呼び出し)を返さなかったということです。 return文がない(@toboが指摘しているように)エラーを直接引き起こしていたのです。 私は、配列ではなく約束を返す必要があった。

2つ目は、AngularUI-Bootstrapが結果を受け取るために、私が使用する必要があることです。

私は次の質問に遭遇しました: サーバーサイド最適化のために$ http経由でサーバーにangle-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;
    });
}

約束を使って、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コメントを削除しても、値は正常に表示されます。 successしたときのconsole.log出力は、配列内で期待しているすべての値も返します。

AngularUI-Bootstrapに返された配列が表示されない原因は何ですか?


Answer #1

$ 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;
}

Answer #2
$scope.getTypeaheadValues = function($viewValue)
{
    var someOutput="";//return something

    $http({
        method: 'GET',
        url: 'api/v1/person?name__icontains=' + $viewValue
    }).error(function (data) {
        console.error(data);
    }).success(function (data) {
        console.log(data);//Do whatever you want 
    });
return someOutput;

}

// return文がありません





angular-ui-bootstrap