AngularJs + JqueryUI slider initial values

Question

this is my first post here, so I hope it will be comprehensive.

I'm using AngularJs and I've added a JqueryUI slider using an angular directive. I've found a lot of examples on how to do that, but none of them show me ho to add the initial values to the slider, from the scope.

Here is a jsfiddle I'created

var testApp= angular.module('testApp',['ngResource']);

testApp.factory('remoteRequest', function($resource) {
var remoteRequest = $resource('/echo/json/');
return remoteRequest;
});

testApp.directive('sliderDays', function() {
return {
    link: function(scope, elem,attrs) {
        $(elem).slider({
            range: true,
            min: scope.days[1],
            max: scope.days[scope.days.length-1],
            values: [scope.days[0], scope.days[1]],
            slide: function( event, ui ) {
                console.log(ui.values[ 0 ] +" "+ ui.values[ 1 ]                 );
            }
        });
    }
}
});

function TestCtrl($scope, $resource, remoteRequest)
{
$scope.prova=1;
$scope.days=[];
var ret= remoteRequest.get(function(){
     $scope.days=[1,2,3,4,5,10,25];
});
}

Any kind of help will be much appreciated, thanks!

Justen · Accepted Answer · 2013-04-03 19:30:39Z

2

Here's a working fiddle from you code, I added comments at places I changed. One main problem you had was that you were trying to access array elements from scope.days before it had any data.

Fiddle

http://jsfiddle.net/ntaUJ/24/

View

<div ng-app="testApp">
    <div ng-controller="TestCtrl">
        <p><span>{{days[0]}}</span> - <span>{{days[days.length-1]}}</span></p>
        <div slider-days days="days"></div>
    </div>
</div>

Code

var testApp= angular.module('testApp',['ngResource']);

testApp.directive('sliderDays', function() {
  return {
    link: function(scope, elem,attrs) {
      $(elem).slider({
        range: true,
        min: scope.days[1],
        max: scope.days[scope.days.length-1],
        values: [scope.days[0], scope.days[scope.days.length-1]],
        slide: function( event, ui ) {
          console.log(ui.values[0], ui.values[1]);
        }
      });
    }
  }
});

function TestCtrl($scope)
{
    $scope.days=[1,2,3,4,5,10,25];
}

edited Apr 3, 2013 at 19:30

answered Apr 3, 2013 at 19:17

Justen

4,8799 gold badges48 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Akallabeth Over a year ago

Ok, but wath if I need to load data after a remote request, as I've done in my example? There is another way or I simply mistunderstood the usage of that kind of directive?

Justen Over a year ago

The digest cycles of angular should update the information you send to your directive. You just need to add some programming checks. You can also look at setting up a two-way data binding isolated scope for the directive such as scope: {days: "="} (check out docs.angularjs.org/guide/directive for more info on that). If its a one time call for the data, you can resolve that information which will make it so you have the data before the view is rendered (more info here on that here docs.angularjs.org/api/ng.$routeProvider (look for the resolve property))

Akallabeth Over a year ago

I solved using "ui-if" controller with angular-ui, like specified in this post, [link]stackoverflow.com/questions/12353549/… Thank you!

Collectives™ on Stack Overflow

AngularJs + JqueryUI slider initial values

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related