Conditional Two way data binding

[Srikar Shastry]

Hello,

I'm in a bit of a pickle.

I have an input box and a slider (i'm using this slider ui: http://prajwalkman.github.io/angular-slider/ or https://github.com/prajwalkman/angular-slider).

The input box should only accept numbers and when it goes below 3, the value should change back to 3 on ng-blur (not on ng-change, meaning user can still type 1 and 2. It has to be like this because if I use ng-change, it restricts me type 1 or 2 hence, I cant type 10 or 20, etc.). Now, the slider and input box share the same ng-model (two way data binding) making the user to see what value of slider and vice versa. If a user type a number in the input box, the slider is adjusted provided the above condition meets.

Now, the issue I'm running into an issue, I'm not able to make the input box value value based on the slider.

Here is the example:

http://plnkr.co/edit/6nZrECAxxRORuKWmLZ1R?p=preview

The condition should still meet keeping the slider restricted between 3 and 12. How can I achieve that? Any help is appreciated.

Regards,

Srikar

[Sander Elias]

Hi Srikar,

Like this? http://plnkr.co/edit/wThD4MUIg4yqG5cNqltj?p=preview

Regards

Sander

[James Brewer]

I've simplified it for you: http://plnkr.co/edit/rfS9PagKsPQOBXZaZK9U

There are two things that I think you should consider when comparing our code:

1) You were using multiple variables (`$scope.months` and `$scope.value`) for the same purpose. This added needless complexity to your code.

2) You also made a big deal out of restricting the slider to a range of 3 and 12. Given the difficulty I had getting `<input type="number">` to play nicely, I understand wanting to take another route, but using `<input type="number">`'s `min` and `max` attributes is what you should have done, but I bet you tried that and couldn't get it to work. Let me explain why.

After reading this (https://groups.google.com/forum/#!msg/angular/Ecjx2fo8Qvk/x6iNlZrO_mwJ) post, I am betting that the slider's `ng-model-high` directive is changing `$scope.value` from an integer to a string. No matter. I added a simple `$watch` to take care of parsing `$scope.value` back to an integer and all was well in the world.

I hope this was helpful!

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Srikar Shastry]

@Sander and James,

Thank you for your responses but its not working.

You see even if its type text or type number, when user manually enters the number 1, the slider goes off its track. Now, according to angular, thats normal because input field and slider share the same model.

What I want is to break the connection (data binding between input field and slider) when the value entered on input field is 1 or 2, keeping the slider at minimum 3. That way, on blur, the value on input goes back to 3 and that when that happens, the connection (data binding) is restored. That jiggering of slider is not to happen. Any help on breaking the data binding please?

[Tony pee]

Sounds like you might want to have 2 numbers in flight, and logic to manage them. You will want to bind one value to the slider, one to the input. Then you can watch the values ($scope.$watch) and manually manipulate them as needed.  

This way, your slider can represent a number which is not what is present in the input. 

 

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

--

Tony Polinelli

[Srikar Shastry]

But wouldn't that approach will have interaction issues? I mean if I try that, the value on slider will be different from the input fields.(not data binding on regular intervals, 3 to 12). The slider will be working on some value and input to some other.

I'm not able to approach the binding of this value. I tried to create separate models for slider and fields but then the navigation of slider doesnt change the value on input field, meaning the data binding is not working:

myApp.controller('myCtrl', function($scope) {

  $scope.months = 3;

  $scope.sliderMonths = 3;

  $scope.minVal = 3;

  

  if($scope.months == 1 || $scope.months == 2){

      $scope.sliderMonths = 3;

  }

  else{

      $scope.sliderMonths = parseInt($scope.months);

  }

});

This approach is not making the slider to change the value of input fields even though the values within the range. Any help please? 

[Sander Elias]

Hi Srikar,

just use an $scope watch, to watch BOTH in one go.

have a look at this: http://plnkr.co/edit/dmwtbFYGFSj59ZnaWZIv?p=preview

Regards

Sander