1

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

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

使用此代码，我只能知道用户在 debounce 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>
4

4 回答 4

0

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

于 2015-06-25T10:10:47.377 回答
0

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

于 2015-06-25T10:13:09.760 回答
0 
angular.module('customControl').
directive('contenteditable', [function() {
return {
    restrict: 'A', // only activate on element attribute
    require: '?ngModel', // get a hold of NgModelController
    link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return; // do nothing if no ng-model        
        ngModel.$parsers.push(function(value) {
            // do what you want to happen before "debounce"
            // debounce here by waiting 500ms
        });
    }
};
}]);

来源：https ://code.angularjs.org/1.4.1/docs/api/ng/type/ngModel.NgModelController

于 2015-06-25T10:26:01.793 回答
0

无法以简单的方式做到这一点，我已经用下划线库在 angular 之外完成了它。这是我找到的最佳选择。

这是我的代码：

<!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

于 2015-07-15T15:37:34.783 回答