angularjs – 从AngularUI的Bootstrap Typeahead捕获“updater”

发布时间：2020-12-17 17:30:48 所属栏目：安全来源：网络整理

导读：如何从 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)" ……和

如何从 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)
{ ... }

但是我没办法让我抓住这样的事件.有一些方法,一旦选择了预先输入选项,我可以采取额外的行动吗？

解决方法

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

看看这个plunker 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,$scope.output);

        return $scope.output;
    });
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!