Question

我的问题与this post 'Using typeahead and ajax in a AngularJS app'

非常相似

CoffeeScript的：

  $scope.tradingPartners = (searchOn) ->
    console.log("Searching on #{searchOn}")
    $.getJSON("../tp/tpLookupAdmin", {term: searchOn, max: 20}, (response)->
        response)

生成Javascript：

$scope.tradingPartners = function(searchOn) {
      console.log("Searching on " + searchOn);
      return $.getJSON("../tp/tpLookupAdmin", {
        term: searchOn,
        max: 20
      }, function(response) {
        return response;
      });
    };

使用它：

<input type="text" ng-model="testScript.sender" typeahead="sender as sender.label for sender in tradingPartners($viewValue)"

所以什么错了？ ...

getJSON调用很好，结果看起来不错，但是typeahead没有做任何事情。如果我把硬编码的值作为函数的返回，它就可以正常工作。

现在我知道getJSON不只是返回一个对象数组，并且正在执行

$.getJSON("../tp/tpLookupAdmin", {term: searchOn, max: 20}, (response)->
        response).responseJSON

给出undefined。

有效的硬编码json示例：

[{"id":"1","label":"test1"},{"id":"2","label":"test2"}]

我在这里错过了一些简单的事情......

编辑（来自kju回答）：

现在生成的JS是

$scope.tradingPartners = function(searchOn) {
  return $http.post("../tp/tpLookupAdmin?term=" + searchOn).then(function(response) {
    return limitToFilter(response, 15);
  });
};

但它还没有用......

Answer 1

你提到的问题已经得到了你需要的所有答案，所以你的答案确实不是一个好问题。

lookup函数必须返回数组或（AngularJS样式）promise。你返回的是$ .getJSON的返回值，它不是。代码中的回调函数将返回一个数组，但无处可回。它不会以Angular结束。这是无法帮助的，因为您在此处发出异步HTTP请求。请求返回时，您的查找函数早已返回。因此，您需要返回一个承诺。 AngularJS知道如何处理此承诺并处理延迟数据。

正如我所说，另一个问题及其已接受的答案已经包含了所有内容。摆脱$ .getJSOn并使用Angular中显示的$ http服务。

Answer 2

最后我使用了select2。无论如何，我认为这是一种更清晰，更一致的方法。

<input ui-select2="tpSearch" ng-model="testScript.sender" class="input-xlarge"/>

CoffeeScript：

$scope.tpSearch =
    placeholder: "Type to search..."
    minimumInputLength: 2
    ajax:
      url: "../tp/tpLookupPaged"
      quietMillis: 100
      data: (term, page) ->
        term: term # query params 
        page: page
        max: 10
      results: (data, page) ->  
         more = (page * 10) < data.total
         results: data.results, more: more

实现无限滚动是一件轻而易举的事。

确保您的JSON返回包含id和text的数组，或者您必须为select2编写自定义格式化函数（无论如何都很简单）

AngularJS UI Bootstrap使用Coffeescript预先输入ajax

2 个答案: