Question

有文本输入我希望在用户更改文本时立即知道，但我也想使用去抖功能。这样，我可以在用户更改文本时禁用提交按钮，并在检查去抖功能中的文本后启用提交按钮。

有没有办法用纯AngularJS做到这一点？或者我应该使用javascript / jquery？

使用此代码，我只能知道用户在去抖动500ms延迟后何时更改了文本：

<!doctype html>
<html ng-app="app">
    <head>
        <script src="http://localhost/js/angular.min.js"></script>
        <script>
            var app= angular.module('app',[]);

            app.controller('ExampleController',['$scope',function($scope){
                $scope.changed= '';
                $scope.change= function(){
                    $scope.changed= 'Changed!';
                };
            }]);
        </script>
    </head>
    <body ng-controller="ExampleController">
        <div>Message: <input type="text" ng-model="model.message"
            ng-model-options="{debounce:500}" ng-change="change()" />

        <div>{{model.message}}</div>
        <div>{{changed}}</div>
    </body>
</html>

Answer 1

您的主要选择是使用ng-keyup编写自己的去抖动代码。每次按下一个键，您都会收到更改通知（并且更改将出现在ng-model值中），您可以在那里使用自己的setTimeout，并使用所需的去抖功能作为打回来。如果已经设置了超时，只需取消它并在每次按键时重新启动它。

Answer 2

使用$scope.$watch('model-name', function(){...}

Answer 3

{{1}}

来源：Login Review

Answer 4

无法以一种简单的方式完成此操作我已完成在带有下划线库的角度之外。这是我找到的最佳选择。

这是我的代码：

<!doctype html>
<html ng-app="app">
    <head>
        <script src="http://localhost/js/angular.min.js"></script>
        <script src="http://localhost/js/underscore.js"></script>
        <script>
            var underscore= angular.module('underscore',[]);

            underscore.factory('_',function(){
                return window._; // assumes underscore has already been loaded on the page
            });

            var app= angular.module('app',['underscore']);

            app.controller('ExampleController',['$scope','_',function($scope,_){
                $scope.changed= '';

                $scope.change= function(){
                    $scope.debounceMessage($scope);
                };

                $scope.debounceMessage= _.debounce(function($scope){
                    $scope.$apply(function(){
                        $scope.changed= 'Delayed: '+$scope.model.message;
                    });
                }, 500);

            }]);
        </script>
    </head>
    <body ng-controller="ExampleController">
        <div>Message: <input type="text" ng-model="model.message"
            ng-change="change()" />

        <div>{{model.message}}</div>
        <div>{{changed}}</div>
    </body>
</html>

http://plnkr.co/edit/0gnwg9

AngularJS - 如果输入被去除后，如何立即知道输入？

4 个答案: