從AngularUI的Bootstrap Typeahead捕獲「更新」操作

如何從AngularUI的UI Bootstrap指令捕獲「updater」事件？從AngularUI的Bootstrap Typeahead捕獲「更新」操作

我定義我的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。如果原始引導我會使用了「更新」：

$('#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) 
{ ... }

但我還沒有辦法讓我捕捉到這樣的活動。有一種方式可以在選擇打字選項後採取額外的行動嗎？

來源

2013-05-09 Evil Closet Monkey

似乎沒有辦法掛鉤該指令中的事件。但是，您可以在模型值上進行觀察並模擬此行爲。

看看這個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, 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 
    } 
});

來源

2013-05-10 00:13:35

適用於庫中當前限制的一種很好的解決方法。感謝您的提示和示例！ – 2013-05-13 00:30:17

很高興爲你效勞！ – 2013-05-13 15:11:00