Angularjs-检查我是否输入并切换加载程序图标

Angularjs - check if i am typing in input and toggle loader icon

本文关键字：加载 程序 图标 检查 是否 输入 Angularjs-      更新时间：2023-09-26

我是angularjs的新手，当我在输入框中输入时，我试图更改一个图标。事实上，我可以用这种方式检测我是否有焦点：

 $scope.loading = false;
 $scope.focused = function() {
        console.log("got focus");
        $scope.loading = true;
    }
    $scope.blurred = function() {
        console.log("lost focus");
        $scope.loading = false;
    }

以及在html:中

<i data-ng-if="!loading" class="uk-icon-search"></i>
                    <i data-ng-if="loading" class="uk-icon-spinner uk-icon-spin"></i>
                    <input ng-focus="focused()" ng-blur="blurred()" type="text" placeholder="Search...">

通过这种方式，如果加载变量为true，我可以在单击输入时更改图标。。但当我开始打字时，当我再次点击"输入"按钮更改图标时，我会显示微调器图标。有可能吗？感谢

简单视图示例

<div ng-controller="hey">
      <input type="text" ng-model="key" ng-keypress="whenTyping($event)" ng-blur="whenNotTyping($event)"/>  
      <img src="/path/to/img.png" ng-show="typing"/>
      <img src="/path/to/img.png" ng-show="!typing"/>
</div>

简单控制器示例

.controller('hey', function ($scope, $log) {
   $scope.whenTyping = function (event) {
     //the model you typing
     $log.info($scope.key);
     //the event typing
     $log.info(event);
    //you are typing hide img
    $scope.typing = true;
   } 
   $scope.whenNotTyping = function (event) {
     //the model you typed before
     $log.info($scope.key);
     //the event on blur
     $log.info(event);
    //you are not typing hide img
    $scope.typing = false;
   } 
});

不管怎样，我建议你使用控制器以外的指令。

相关文章：