問題

アプリケーションにAngular-ui Bootstrapを使用しています。 私はtypeahdディレクティブを使用します。

HTML:

 <input type="text" class="pass_code_input" ng-model="SuppPrefix" Typeahead="ddl_item.Text for ddl_item in getData($viewValue)"/>
 

コントローラ

 function AutoCompleteCtrl($scope,$http, AutoCompleteSrv) {
    $scope.getData = function (prefix) {
        AutoCompleteSrv.GetAutoComplete("Supplier", prefix).then(function (result) {
            var results_arr = [];
            angular.forEach(result.data, function (item) {
                results_arr.push({ "Val": item.Val, "Text": item.Text });
            });
            return results_arr
        });  
    };
};
 

サービス:

     function AutoCompleteSrv($http) {
    var _$http = $http;
    self = this;
    self.GetAutoComplete = function (DataType, Prefix) {
        var promise = _$http({
            method: "GET",
            url: 'api/AutoComplete',
            params: { 'DataType': DataType, 'Prefix': Prefix }
        }).success(function (data, status, headers, config) {

        }).error(function (data, status, headers, config) {

        });
        return promise;
    };
};
 

私はサーバーからデータを受け取りますが、画面に表示することはできません。クロム開発ツールでデバッガを実行すると、次のエラーが表示されます。

 TypeError: Cannot read property 'length' of undefined
at http://localhost:52145/js/libs/ui-bootstrap-tpls-0.11.0.min.js:13:12650
at m.promise.then.u (http://localhost:52145/js/angular/angular.min.js:97:280)
at m.promise.then.u (http://localhost:52145/js/angular/angular.min.js:97:280)
at http://localhost:52145/js/angular/angular.min.js:98:417
at h.$eval (http://localhost:52145/js/angular/angular.min.js:108:482)
at h.$digest (http://localhost:52145/js/angular/angular.min.js:106:62)
at h.$apply (http://localhost:52145/js/angular/angular.min.js:109:287)
at HTMLInputElement.l (http://localhost:52145/js/angular/angular.min.js:133:191)
at http://localhost:52145/js/angular/angular.min.js:31:32
at q (http://localhost:52145/js/angular/angular.min.js:7:386)
 

のようなのような複数の場所でソリューションを検索しました。また、ブートストラップUIホームページの指示をステップバイステップ実行します。 私は何を間違えたのですか?

  ベストアンサー

私はちょうどこれに遭遇し、ちょうどそれを解決しました。ここでのキーは、角度サイトで与えられた例では、$ http結果を「返す」ということです。それは見るのを混乱させますが、最終的にはそれが重要な返品です。したがって、あなたの場合、戻り値に変数を設定しているので、戻り値は返されません。このようにコードがフォーマットされると、それを変更するには2つのことをする必要があります。 最初は、 "return"ステートメントが間違った場所にあることです。 2番目は、返された値の宣言も間違った場所にあることです。この例の非作業コードは次のとおりです。

 .....
then(function(res){
      var addresses = [];
      angular.forEach(res.data.results, function(item){
        addresses.push(item.formatted_address);
      });
      return addresses;
    });
 

ここで私はそれを動作させるためにそれを変更しました。

 var addresses = []
....
then(function(res){
      angular.forEach(res.data.results, function(item){
        addresses.push(item.formatted_address);
      });
    });
    return addresses;
 

これは、 "then"を使用せずに "success"と "error"関数を使用するとより明確になります。次に、return文がどこにあるべきか、返された値宣言がどこにあるべきかが明らかになります。そのようなコードを書いて、それを動作させることは、私が問題を理解した方法です。 "then"関数の値をアドレスでクリアするか、それ以外の場合はさらに多くの値を追加し続けます。

  同じタグがついた質問を見る

angularjsangular-uiangular-ui-bootstrap