0

I have an angular directive that I'm building with some pagination controls.

<div>
    <!-- table logic here -->
</div>
<div>
    <button bg-click="current=prevPage(current);">Prev</button>
    <input ng-model="current" />
    /{{pages}}
    <button bg-click="current=nextPage(current);">Next</button>
</div>

It works fine, but of course when you change the value in the input.

It will also pick up the empty string during the delete before you enter a new value in.

Is there a way to sniff that out in the directive before it actually fires the change in the current value.

Venkat.R
  • 7,420
  • 5
  • 42
  • 63
Rob
  • 10,851
  • 21
  • 69
  • 109

3 Answers3

0

I maybe understand wrong your question. This will update the model only when you click outside the input

<input ng-model="current" ng-model-options="{updateOn: 'blur'}" />

Or another way, when you change the input value it call a function who test if the new value is valid and set it in current.

Html :

 <div>
     <button bg-click="current=prevPage(current);">Prev</button>
     <input type="number" ng-model="currentInput" ng-change="changeCurrent()" />
     /{{pages}}
     <button bg-click="current=nextPage(current);">Next</button>
 </div>

Controller :

 $scope.currentInput = $scope.current; 
 $scope.changeCurrent = function(){
   if ($scope.currentInput!=""){
    $scope.current = $scope.currentInput;
   }
 }
AlainIb
  • 4,544
  • 4
  • 38
  • 64
0

ngModelOptions is useful in such a case. You could write like this 

<input ng-model="current" ng-model-options="{ updateOn: 'default', debounce: {'default': 500, 'blur': 0} }" />

to delay update value to model 500ms in default and update immediately if lost focus.

That question also has been answered several times, so you should be able to find further information in the other questions.

UPDATE:

$scope.$watch(
   function() {
      return $scope.current;
   }, function(oldVal, newVal) {
      if (!newVal) {
         $scope.current = oldVal
      }
   }
);

If oldVal is also null or an empty string, you could copy $scope.current to another scope variable (say $scope.savedCurrent) whenever newVal has a value and copy it back to $scope.current if not.

Johannes Jander
  • 4,974
  • 2
  • 31
  • 46
  • ok, this seems just like a delay. What if the user deletes the input and just leaves it blank for some time (few seconds, maybe more, who knows). I don't want the list to go empty. It should only update on a valid integer and do nothing for anything else. To add, I would like to check it against `> 0` and `less < pages` count. So would need somewhere to intercept this without firing the change in `current`. – Rob Dec 17 '15 at 10:50
  • OK, I think I understand better now. You could establish a watch-function that listens for changes and in that watch-function either copy the value to a scope-variable or use the oldval to reset the previous value. See my update if you think this would work. – Johannes Jander Dec 17 '15 at 11:20
  • Oh, and switching the input to `` would help with the user entering text instead of numbers, you could at least use the attribute `min="1" to limit it to numbers greater than zero. – Johannes Jander Dec 17 '15 at 11:30
0

You can just check the value of the variable current before do pagination.

I assumes that you are using $watch() to listen the change of your variable current.

code inside your directive's link,

scope.$watch("current", function(newVal, oldVal){
    if(angular.isNumber(newVal)){
        // your variable is a number
        // Do your pagination here
    }
});
Abhilash Augustine
  • 4,128
  • 1
  • 24
  • 24