AngularJS - Как узнать сразу, когда вход был изменен, если он отключен?

Имея текстовый ввод, я хочу знать сразу, когда пользователь меняет текст, но также я хочу использовать функцию debounce. Таким образом, я могу, например, отключить кнопку отправки, когда пользователь меняет текст и активирует кнопку отправки после проверки текста в функции debounced.AngularJS - Как узнать сразу, когда вход был изменен, если он отключен?

Есть ли способ сделать это с помощью чистого 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>

источник

2015-06-25 DrPollit0

, что вы имеете в виду дребезга? –

@ramamoorthy_villi этот параметр создает задержку между взаимодействием пользователя и обновлением модели. – DrPollit0

debouncing for 500ms довольно экстремально, я думаю, обычно я ожидал бы около 250 мс, 500 кажется, что ничего не работает - может быть, возникает раздражение пользователя? –

Ваш главный параметр, чтобы написать свой код дребезга с помощью ng-keyup. Каждый раз, когда нажимается клавиша, вы будете уведомлены об изменении (и изменение будет присутствовать в значении ng-model), и вы можете использовать свой собственный setTimeout там, где требуемая функция отладки является обратным вызовом. Если тайм-аут уже установлен, просто отмените его и перезапустите его при каждом нажатии клавиши.

источник

2015-06-25 10:10:47 mGuv

Использование $scope.$watch('model-name', function(){...}

источник

2015-06-25 10:13:09 Michael

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-25 10:26:01 TekTimmy

Не будучи в состоянии сделать это простым способом я закончил делать это за пределами угловой с библиотекой подчеркивания. Это лучший вариант, который я нашел.

Вот мой код:

<!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-15 15:37:34 DrPollit0

AngularJS - Как узнать сразу, когда вход был изменен, если он отключен?

ответ

Смежные вопросы