Kann ich einen überwachten & lt; -Eingabe & gt; in AngularJS mit _lodash?

Habe ich Folgendes was macht eine Uhr auf einem <input> Feld gebunden ist $Umfang.id. Jedes mal, wenn der Wert des Eingabefeldes ändert sich das watch-Funktion wird ausgeführt:

$scope.$watch("id", function (id) {

   //code that does something based on $scope.id

});

Gibt es eine Möglichkeit, ich kann ein timeout auf diesem oder debounce diese mit _lodash, so dass der code
nicht ausführen, auf jeden Tastendruck während der Benutzer den Wert ändern.

Was ich möchte ist, für eine
Verzögerung von einer Sekunde, so dass, nachdem der Benutzer beendet Eingabe für eine Sekunde dann
der code-block im inneren der Uhr läuft. Beachten Sie, dass der Eingabe-Wert ist etwas, das konnte sich jederzeit ändern. Zum Beispiel brauche ich die Funktion, die aufgerufen werden, wenn der Wert "1" oder "10" oder "1000". Dies ist etwas ähnlich wie das Suchfeld mit Vorschlägen bei Google arbeitet. Wenn der Benutzer Typen in 999 dann brauche ich die Funktion, die aufgerufen werden. Wenn er löscht eine 9, also es ist zu 99 dann brauche ich die Funktion, die aufgerufen werden.

Ich habe _lodash zur Verfügung, so dass eine Lösung, die verwendet wird, könnte die beste Passform für meine Bedürfnisse.

InformationsquelleAutor der Frage Melina | 2014-01-13

  1. 66

    Ist, dass das, was Sie suchen?

    $scope.$watch("id", _.debounce(function (id) {
    //Code that does something based on $scope.id
    //This code will be invoked after 1 second from the last time 'id' has changed.
}, 1000));

    Beachten Sie jedoch, dass, wenn Sie ändern möchten, $scope innerhalb dieser Funktion sollten Sie wickeln Sie es $scope.$apply(...) als wenn _.debounce - Funktion verwendet $timeout intern (soweit ich verstehe es nicht) Winkel wird nicht bewusst sein, die änderungen, die Sie haben auf der $scope.

    UPDATE

    Als um die aktualisierten Frage - ja, Sie müssen wickeln Sie die gesamte callback-Funktion Körper mit

    $scope.$apply():

    $scope.$watch("id", _.debounce(function (id) {
    //This code will be invoked after 1 second from the last time 'id' has changed.
    $scope.$apply(function(){
        //Code that does something based on $scope.id
    })
}, 1000));

    InformationsquelleAutor der Antwort Alex Vayda

  2. 77

    Können Sie ngModelOptions in Eckigen 1.3.0

    HTML:

    <div ng-controller="Ctrl">
  <form name="userForm">
    Name:
    <input type="text" name="userName"
           ng-model="user.name"
           ng-model-options="{ debounce: 1000 }" />
    <button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button><br />
  </form>
  <pre>user.name = <span ng-bind="user.name"></span></pre>
</div>

    Mehr Info: https://docs.angularjs.org/api/ng/directive/ngModelOptions

    InformationsquelleAutor der Antwort AhmedRiyad

  3. 33

    Ich weiß, die Frage fragt nach einer lodash Lösung. Egal, hier wird eine eckige einzige Lösung:

    app.factory('debounce', function($timeout) {
    return function(callback, interval) {
        var timeout = null;
        return function() {
            $timeout.cancel(timeout);
            var args = arguments;
            timeout = $timeout(function () { 
                callback.apply(this, args); 
            }, interval);
        };
    }; 
});

    In der Steuerung:

    app.controller('BlaCtrl', function(debounce) {

    $scope.$watch("id", debounce(function (id) {
        ....
    }, 1000));

});

    InformationsquelleAutor der Antwort jdachtera

  4. 6

    Können Sie Kapseln diese in einer Richtlinie. Quelle: https://gist.github.com/tommaitland/7579618

    <input type="text" ng-model="id" ng-debounce="1000">

    Javascript

    app.directive('ngDebounce', function ($timeout) {
  return {
      restrict: 'A',
      require: 'ngModel',
      priority: 99,
      link: function (scope, elm, attr, ngModelCtrl) {
          if (attr.type === 'radio' || attr.type === 'checkbox') {
              return;
          }

          var delay = parseInt(attr.ngDebounce, 10);
          if (isNaN(delay)) {
              delay = 1000;
          }

          elm.unbind('input');

          var debounce;
          elm.bind('input', function () {
              $timeout.cancel(debounce);
              debounce = $timeout(function () {
                  scope.$apply(function () {
                      ngModelCtrl.$setViewValue(elm.val());
                  });
              }, delay);
          });
          elm.bind('blur', function () {
              scope.$apply(function () {
                  ngModelCtrl.$setViewValue(elm.val());
              });
          });
      }
  };
});

    InformationsquelleAutor der Antwort jessegavin

Schreibe einen Kommentar