mit Debounce auf Kontrollkästchen eckig

Question

Ich habe mit mehreren Kontrollkästchen zum Filtern einer Reihe von Daten. Ich möchte jedoch nicht, dass die Checkboxen nach jedem einzelnen Klick eines Kontrollkästchens einen Filter auslösen, also wollte ich es entprellen. Warten Sie vielleicht 500ms auf eine Sekunde, nachdem das letzte Kontrollkästchen ausgewählt wurde.

Check-out die mein plnkr

 <input type="checkbox" 
     ng-model="user.cool" 
     ng-model-options="{ debounce: 1000 }"/> 
<input type="checkbox" 
     ng-model="user.lame" 
     ng-model-options="{ debounce: 1000 }"/> 

hier ist es im Grunde Warteschlangen nur die Klick-Optionen Checkbox und ändert das Modell Sekunden auseinander, aber ich will es beide in der gleichen Zeit ändern. Wie kann ich das erreichen?

Danke!

Answer 1

Sie können in Ihrem App-Controller $scope.$watch verwenden, um das Ergebnis mehrerer Modelleigenschaftenänderungen zu steuern. $watch kann nicht nur einzelne Eigenschaft, sondern auch einen Ausdruck bewerten; dann kann Callback entprellt werden; Informieren Sie sich später winkelig über die erforderlichen Änderungen, indem Sie $scope.$apply anrufen.

$scope.$watch('user.lame + user.cool', _.debounce(function (id) { 
    $scope.$apply(function() { 
     //code that updates UI 
    }) 
}, 1000)); 

Auch diesen Beitrag überprüfen: Can I debounce or throttle a watched <input> in AngularJS using _lodash?

Hier ist die aktualisierte zupfen: https://plnkr.co/edit/AkhEjEg8JCyM32j21MRQ?p=preview

Answer 2

Sie könnten nur $ watchCollection Methode eckige, es werden das gleiche tun. Keine Extras erforderlich.

(function(angular) { 
    'use strict'; 
    angular.module('optionsExample', []) 
    .controller('ExampleController', ['$scope', 
     function($scope) { 
     $scope.user = { 
      name: 'Igor' 
     }; 
     $scope.$watchCollection('user', function(n, o) { 

      console.log(n); 
     }); 
     } 
    ]); 
})(window.angular); 

prägnanter Form, eine debounce Definition und Ihre Form würde wie folgt aussehen:

<form name="userForm" ng-model="user" ng-model-options="{ debounce: 1000 }"> 
    <label>Name: 
    <input type="text" name="userName" ng-model="user.name" /> 
    <input type="checkbox" ng-model="user.cool" /> 
    <input type="checkbox" ng-model="user.lame" /> 
    </label> 
    <button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button> 
    <br /> 
</form>