الحد من نتائج الكتابة المسبقة

StackOverflow https://stackoverflow.com//questions/25041613

سؤال

أنا أستخدم توجيه الكتابة angular-ui للاتصال بواجهة برمجة تطبيقات خرائط Google واسترداد مجموعة من العناوين.عادةً عندما أحتاج إلى تحديد كمية النتائج المرئية، أفعل شيئًا مثل:

<input typeahead="eye for eye in array | filter:$viewValue | limitTo:10">

يعمل هذا بشكل مثالي وتقتصر النتائج على 10.ومع ذلك، عندما أحاول أن أفعل نفس الشيء مع نتائج غير متزامنة، فإنه لا يعمل.سيعطي نتائج أكثر مما حددته في limitTo.

هل أفعل شيئًا غير صحيح أدناه؟

وهنا الغطاس:

لغة البرمجة:

  <input ng-model="asyncSelected" typeahead="address for address in getLocation($viewValue) | limitTo:1" typeahead-loading="loadingLocations">

جافا سكريبت:

  $scope.getLocation = function(val) {
    return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: val
      }
    }).then(function(res){
      var addresses = [];
      angular.forEach(res.data.results, function(item){
        addresses.push(item.formatted_address);
      });
      return addresses;
    });
  };

أقوم حاليًا بما يلي للحل البديل، أنا فقط أشعر بالفضول لماذا بسيط limitTo لا يعمل.

$scope.getLocation = function(val) {
    return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: val
      }
    }).then(function(res){
      var addresses = [];
      var resultNumber = res.data.results.length > 5 ? 5 : res.data.results.length;
      for(var i = 0; i < resultNumber; i++){
        var obj = res.data.results[i];
        var addr = obj.formatted_address;
        addresses.push(addr);
      }
            return addresses;
    });
  };
هل كانت مفيدة؟

المحلول

يبدو أن الكتابة المسبقة لا تدعم الوعود.لذلك من الأفضل ربطها بمجموعة، ثم تحديث تلك المجموعة عندما تحصل على رد من جوجل.قد ترغب في التفكير في الرد بقوة، الآن يتم تقديم طلب لكل حرف يتم كتابته.

لاحظ أنك أيضًا لم تعد بحاجة إلى الفلتر بعد الآن، لأن الفلتر يتم إجراؤه بالفعل بواسطة Google Sever Side.

http://plnkr.co/edit/agwEDjZvbq7ixS8El3mu?p=preview

var app = angular.module('app',['ui.bootstrap']);

app.controller('Ctrl', ['$scope','$http', function($scope,$http){
  $scope.locations = [];
  $scope.$watch('asyncSelected', function(val) {
    $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: val
      }
    }).then(function(res){
      $scope.locations.length = 0;
      angular.forEach(res.data.results, function(item){
        $scope.locations.push(item.formatted_address);
      });
    });
  });

}]);


  <head>
    <link data-require="bootstrap-css@~3.1.1" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="Ctrl">
    <input type="text" ng-model="asyncSelected" placeholder="Address" typeahead="address for address in locations | limitTo:1" typeahead-loading="loadingLocations" class="form-control">
  </body>

</html>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top