【问题标题】:AngularJS - Typeahead Asynchronous dataAngularJS - Typeahead 异步数据
【发布时间】:2018-09-23 15:16:07
【问题描述】:

我正在使用 Typeahead 引导程序和 anguarJS 从 rails api 获取数据,问题是每次我在输入中键入字母时请求都会获取数据,我希望执行并减少一点请求的数量和去抖动它以在键入的内容和检索到的数据之间进行匹配。

这里是控制器:

 getSpecificationTemplatesNames = (value) ->
    dataStore.post DATASTORE_CACHE_KEY, "/specification_templates/specification_templates_names",{post: {search: value}},(data) ->
      $scope.names = data.templates.names


  # --- WATCHER ---

  $scope.$watch 'specificationTemplate.name', (value)  ->
    $scope.specificationDisabledForm = !value
    getSpecificationTemplatesNames(value)

这里是haml部分:

 .col-md-8
          %input.specification-template-name{ type: 'text', name: 'name', typeahead: 'name for name in names | filter:$viewValue | limitTo:15', typeahead_wait_ms:'2000',
                        ng: { model: 'specificationTemplate.name', disabled: 'contractPeriod.isArchived()' }}

在 ui-bootstrap 文档示例版本 0.12.1 中,异步加载是通过 typeahead="address for address in getLocation($viewVlue) 触发的,但它们没有'不要在模型上使用观察者。他们的 getLocations 方法是我的 getSpecificationTemplatesNames 方法。

有人可以帮助执行此操作并与我一起转换代码并使用咖啡脚本正确使用 typeahead-wait-ms 选项!

【问题讨论】:

标签: angularjs coffeescript angular-ui-bootstrap typeahead debounce


【解决方案1】:

您的问题是您没有正确定义typeahead-wait-ms。属性名称中有下划线,而不是破折号。

此外,您可以使用ng-model-options="{'debounce': ...}" 为模型的更新添加去抖动功能。

【讨论】:

  • 事实上代码运行正常是因为在项目中我们自定义了语法并且我们使用了coffeescript,这就是下划线起作用的原因
  • 问题是每次我在输入中键入一个字符时,对服务器的请求都会被午餐,所以我想要的是减少请求的数量,就像他们在文档中所做的那样:angular-ui.github.io/bootstrap/versioned-docs/0.12.1/#/…
【解决方案2】:

这是我找到的解决方案,使用 promise:

haml 部分:

 %input.specification-template-name{ type: 'text', name: 'name', typeahead: 'name for name in getSpecificationTemplatesNames($viewValue) | limitTo:15', typeahead_wait_ms:'1000',
                        ng: { model: 'specificationTemplate.name', disabled: 'contractPeriod.isArchived()' }}

angularjs 控制器:

$scope.getSpecificationTemplatesNames = (value) ->
    $q( (resolve, reject) ->
     dataStore.post DATASTORE_CACHE_KEY, "/specification_templates/specification_templates_names",{post: {search: value}},(data) ->
        resolve( data.templates.names || [] )
    )

  # --- WATCHER ---

  $scope.$watch 'specificationTemplate.name', (value)  ->
    $scope.specificationDisabledForm = !value

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-09-22
    • 2016-08-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多