从 AngularUI 的 Bootstrap Typeahead 捕获“更新程序”操作答案

【问题标题】：Capture "updater" action from AngularUI's Bootstrap Typeahead从 AngularUI 的 Bootstrap Typeahead 捕获“更新程序”操作
【发布时间】：2013-05-09 23:01:37
【问题描述】：

如何从AngularUI 的UI Bootstrap 指令中捕获“更新程序”事件？

我已经定义了我的 HTML：

<input type="text" pattern="[0-9]*" class="span6" placeholder="8675309" ng-model="empid" typeahead="entry for entry in httpEmpIdSearch($viewValue, 8)">

...和我的相关功能：

$scope.httpEmpIdSearch = function(query, limit)
{
    return $http.get(
        '/visitorLog/api/v1/employee/?limit=' + limit + '&empid__startswith=' + query
    ).then(function(response)
    {
        output = [];

        angular.forEach(response.data.objects, function(value, key) {
            this.push(value.bems.toString());
        }, output);

        return output;
    });
}

当用户单击弹出窗口中的 ID 时，我想采取其他操作（自动填写表单）。如果是原始 Bootstrap，我会使用“更新程序”：

$('#sampleElement').typeahead({
  minLength: 3,
  source: function (query, process) 
  {
    // get the data
  },
  updater: function (item)
  {
    // user clicked on an item, do something more!
  },
});

我尝试过各种监听器，例如：

$scope.$on('typeahead-updated', function(event)
{ ... }

但我没有办法让我捕捉到这样的事件。选择预输入选项后，我是否可以采取其他措施？

【问题讨论】：

标签： angularjs angular-ui angular-ui-bootstrap

【解决方案1】：

此外，在 0.4.0 版的 ui-bootstrap 库中，现在支持 typeahead-on-select 指令。这应该提供您想要的事件。

见： https://github.com/angular-ui/bootstrap/commit/91ac17c9ed691a99647b66b3f464e3585398be19

【讨论】：

【解决方案2】：

似乎没有办法在指令中挂钩该事件。但是，您可以监视模型值并模拟此行为。

看看这个笨蛋example

由于您是动态地从服务器中提取数据列表，因此此解决方案可能不适合您。但我肯定会看看手表，这似乎是实现预期结果的最佳方式。

类似的方法可能会奏效。

$scope.output = [];
$scope.httpEmpIdSearch = function(query, limit)
{
    return $http.get(
        '/visitorLog/api/v1/employee/?limit=' + limit + '&empid__startswith=' + query
    ).then(function(response)
    {
        $scope.output.length = 0;

        angular.forEach(response.data.objects, function(value, key) {
            this.push(value.bems.toString());
        }, $scope.output);

        return $scope.output;
    });
}

$scope.$watch('empid', function(newValue, oldValue){
    if(newValue !== oldValue && $scope.output.indexOf(newValue) !== -1){
       //do work here
    }
});

【讨论】：

解决库中当前限制的一个很好的解决方法。感谢您的提示和示例！

【解决方案3】：

typeahead 相关指令的完整列表在这里：

https://github.com/angular-ui/bootstrap/tree/master/src/typeahead/docs

typeahead-editable、typeahead-input-formatter、typeahead-loading、typeahead-min-length、typeahead-on-select、typeahead-template-url、typeahead-wait-ms

【讨论】：