ng-blur with uib-typeahead (ui-bootstrap)

Question

   <div class="form-group">
       <label for="Skill1">Skill</label>
       <input type="text"
        ng-model="vm.skill1" 
        name="skill1"
        uib-typeahead="skill for skill in vm.skills | filter:$viewValue"
        class="form-control typeahead"
        ng-blur="vm.checkSkills(vm.skill1)"
        placeholder="" 
        required> 
   </div>

我的环境是 AngularJs，我试图仅在用户离开此字段时使用 ng-blur，但是由于预输入，如果我使用鼠标选择预输入建议的选项， ng-blur "think" 我离开了这个领域并用我输入的第一个字母激活了 ng-blur 我该如何覆盖它？

Answer 1

无需使用 ng-blur，使用

即可实现所需的功能

typeahead-on-select="checkSkills($item,$model,$label)"

HTML

<input  type="text"  ng-model="skill1" uib-typeahead="skill for skill in skills | filter:$viewValue" class="form-control typeahead" typeahead-on-select="checkSkills($item,$model,$label)"

JS

$scope.checkSkills = function(item, model, label){ 
   if(model){
      //your validation logic goes here
     // console.log (" Check skill, correctly set ", (item), model , label);
   }

 }

Plunker 示例：https://plnkr.co/edit/7N8TU2?p=preview

Answer 2

您可以简单地在模糊处理程序中添加一些轻微的延迟，以便它在 uib-typeahead 的 onClick 处理程序之后触发。

例如，您可以在 vm.checkSkills 方法中使用带有承诺的 $timeout()，例如：

$scope.checkSkills = function(skill) {
    $timeout(function() {}, 100).then(function() {
        // your logic
    });
}

ng-blur with uib-typeahead (ui-bootstrap)

ng-blur with uib-typeahead (ui-bootstrap)

html

angularjs

angular-ui-bootstrap