This is my jQueryMobile Page with AngularJS:
<div data-role="page" id="page1">
<div data-role="header"><h1>Chart</h1></div>
<div data-role="content">
<div id="plotChart" class="myChart"></div>
<form>
<input type="range" value="0" min="-10" max="10" ng-init="0" ng-model="value1" ng-change="update()"/>
<input type="range" value="0" min="-10" max="10" ng-init="0" ng-model="value2" ng-change="update()"/>
<input type="range" value="0" min="-10" max="10" ng-init="0" ng-model="value3" ng-change="update()"/>
</form>
<div class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">Value1: {{value1}}</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">Value2: {{value2}}</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">Value3: {{value3}}</div></div>
</div>
</div>
</div>
My update function looks like this:
function MyCtrl($scope){
$scope.update = function(){
console.log("C=" + $scope.value3 + "B="+$scope.value2 + "A="+$scope.value1);
}
}
The {{value1-3}} on the page is updated correctly when moving the sliders The update function keeps logging zero when moving the sliders.
Why? Are the here different scopes involved?
(Also the sliders have -10 as initial value - not -10 as defined) jquery-1.9
ng-init=0 won't set any scope properties. ng-init expects an Angular expression, which is evaluated against the scope. You could write ng-init='value1 = 0' but it is better to initialize model values in your controller:
$scope.value1 = 0;
value = 0 should not be used with Angular form elements (except for type=radio).
Here is a minimal fiddle that only includes Angular, and only shows the changes I talked about above.