Two-way binding is not recognising variable change in AngularJS

Question

I have a slider that is used to changed a value in my controller like so

index:

            <div>
                <rzslider
                     rz-slider-model="slider.value"
                     rz-slider-options="slider.options">
                </rzslider>
                     <p>{{slider.value}}</p>
            </div>

controller:

app.controller('gbarchartController', function($scope) {
$scope.slider = {
          value: 20,
          options: {
            floor: 0,
            ceil: 30
          }
        };

When i change the value of the slider, the code below displays it on screen as 2 way binding should.

<p>{{slider.value}}</p>

The problem is , if i try to access this variable through a function in my controller, it uses the initial value of 20 that has been set. eg. If i change the slider to 10, the below code still uses the value 20. the variable in question is $scope.slider.value . The value is used to cut the length of an array, that in turn is used to display a graph using highchart.js.

            $scope.graph = function(metric) {
        Highcharts.chart(metric, {

            chart: {
                type: 'column'
            },
            title: {
                text: 'Number Of Executions'
            },
            colors: [
                     '#7CFC00', '#FF0000'
                     ],

            xAxis: {
                categories: numExe.hash.slice(0, $scope.slider.value),
                title: {
                    text: 'Query Hash Value'
                }
            },
            yAxis: {
                title: {
                    text: '% of Total Executions'
                }
            },
            tooltip: {
                shared:true
            },

            series: [{
                name: 'Baseline',
                data: numExe.base.slice(0, $scope.slider.value)
            },
            {
                name: 'Comparative',
                data: numExe.compare.slice(0, $scope.slider.value)
            }]
        });

    }

Long story short, The variable changes in the html but does not change in the controller. Any help would be great thanks.

Would be easier to check if you could post a jsfiddle or codepen or something. — TheRodeo
– TheRodeo, Commented Feb 17, 2016 at 14:13
@TheRodeo I would post one but the data generated comes from a local server and I have to spend hours fixing it to work with local data — Keith Tuffy
– Keith Tuffy, Commented Feb 17, 2016 at 14:52

Jacob Mouka · Accepted Answer · 2016-02-17 15:13:41Z

1

I don't think Highcharts monitors its data for changes, so it won't detect changes to your series data (see docs here). Additionally the series data passed in to the graph is static, so it won't update after the slider changes. You'll need to create a local Series variable to hold the series data, and update the series data when the slider changes. I'm not sure what numExe is so I can't say how the data is generated, but the Series object has setData() method (with a redraw parameter) that should do the trick.

edited Feb 17, 2016 at 15:13

answered Feb 17, 2016 at 15:04

Jacob Mouka

2,11519 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

Two-way binding is not recognising variable change in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related