个人中心
gpt4 book ai didi

ajax - angular-ui bootstrap typeahead 限制不起作用

转载 作者：行者123 更新时间：2023-12-01 00:34:22 27 4
gpt4 key购买 nike

我是 angularjs 的新手。从这个网站 https://angular-ui.github.io/bootstrap/我为我的 angularjs 项目获得了 typeahead 指令，但我的限制和过滤器在这里不起作用，这是我的代码。

当我在文本字段中键入“c”时，我只想显示 8 条记录，而是显示所有记录。

笨蛋
http://plnkr.co/edit/RhwHmKwSxWBh3rp0u85O?p=preview

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {

  $scope.getLocation = function(val) {
    return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: val,
        sensor: false
      }
    }).then(function(response){
      return response.data.results.map(function(item){
        return item.formatted_address;
      });
    });
  };
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<script type="text/ng-template" id="customTemplate.html">
  <a>
      <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
      <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
  </a>
</script>
<div class='container-fluid' ng-controller="TypeaheadCtrl">


    <h4>Asynchronous results</h4>
    <pre>Model: {{asyncSelected | json}}</pre>
    <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue) | filter:$viewValue  |limitTo:8" typeahead-loading="loadingLocations" class="form-control">
    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>

</div>
  </body>
</html>

最佳答案

我知道这是一个老问题，但我会继续回答它以供将来引用:

这是通过 $http 加载时的已知行为，因为在调用 get 方法时限制将应用于 promise ，这​​将导致它在您的 promise 解析时不适用于实际结果集。

见问题 #1740在 ui.bootstrap 存储库中获取更多信息。

解决这个问题的方法是滚动您自己的过滤器函数并从该过滤器返回一个 promise ，而不是直接获取记录，或者在 API 中实现一个限制参数并限制它的服务器端。

关于ajax - angular-ui bootstrap typeahead 限制不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30449993/

27 4 0
文章推荐： javascript - 在 while 循环之外显示帖子描述
文章推荐： jQuery — 使用 .delay() 推迟 .load()？
文章推荐： php - 如何确定新项目的订单？
文章推荐： r - 如何在 gplots heatmap.2 中设置轴标签大小？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com