scope variable not updating with ng-change - angularjs

Question

Seems like a simple problem though but finding it hard to fix. There is a pagination component, that has a button & a dropdown. User can go to a page by either clicking the button or selecting that page number in dropdown.

The problem is, when I select a value in the dropdown, nothing happens. Because the scope variable doesnt change from the previous one.

aspx:

<div data-ng-app="app" data-ng-controller="ReportsCtrl">
<div id="paging-top">                
 <div>
   <ul>         
     <li>
       <select data-ng-model="SelectedPage" data-ng-change="ShowSelectedPage();" 
        data-ng-options="num for num in PageNumbers track by num">
       </select>
     </li>
     <li data-ng-click="ShowNextPage();"><a href="#">Next</a></li>         
   </ul>
  </div>
</div>

app.js

var app = angular.module("app", ["ngRoute"]);

ReportsCtrl.js

app.controller("ReportsCtrl", ["$scope","ReportsFactory",function ($scope,ReportsFactory) {

init();
var init = function () { 
  $scope.ShowReport(1);
}

$scope.ShowReport = function (pageNumber) {
  GetUserResponsesReport(pageNumber);
} 

function GetUserResponsesReport(pageNumber) {

    $scope.UserResponsesReport = [];        
    var promise = ReportsFactory.GetReport();
    promise.then(function (success) {
        if (success.data != null && success.data != '') {                
            $scope.UserResponsesReport = success.data;                
            BindPageNumbers(50, pageNumber);
        }            
    });        
}

function BindPageNumbers(totalRows, selectedPage) {        
    $scope.PageNumbers = [];
    for (var i = 1; i <= 5 ; i++) {
        $scope.PageNumbers.push(i);
    }
    $scope.SelectedPage = selectedPage;        
}

$scope.ShowSelectedPage = function () {
    alert($scope.SelectedPage);
    $scope.ShowReport($scope.SelectedPage);
}

 $scope.ShowNextPage = function () {        
    $scope.SelectedPage = $scope.SelectedPage + 1;
    $scope.ShowReport($scope.SelectedPage);        
}   
}]);

Say, the selected value in dropdown is 1. When I select 2 in the dropdown, the alert shows1. When Next is clicked, the dropdown selection changes to 2 as expected. Now, when I select 1 in the dropdown, the alert shows 2.

Tried to make a fiddle, but do not know how to do with a promise - http://jsfiddle.net/bpq5wxex/2/

sorry about that. Posting the entire code was making the post lengthy and new edits weren't attracting any responses after a certain period. Been fighting with this issue for long. Hence tried creating a simpler/almost complete code again.Thanks for your help. — sukesh
– sukesh, Commented Jul 9, 2015 at 10:26
I do not understand why the $scope.SelectedPage wasnt updating with ng-change, but this little hack worked. - sending the value as parameter — sukesh
– sukesh, Commented Jul 9, 2015 at 10:28
data-ng-change="ShowSelectedPage(SelectedPage); and in controller - $scope.ShowSelectedPage = function (val) {$scope.SelectedPage=val;} — sukesh
– sukesh, Commented Jul 9, 2015 at 10:29
well, if the answer to this question is actually the key to the solution, then I suspect that you are falling in the trap of JavaScript Prototype Inheritance. stackoverflow.com/questions/14049480/… — Claies
– Claies, Commented Jul 9, 2015 at 10:29

RIYAJ KHAN · Accepted Answer · 2017-12-06 15:10:14Z

8

With your OP SelectedPage is just primitive variable.

With every angular directive new scope is get created.

So,SelectedPage is not update outside the ng-repeat scope after drop-down is changed i.e. in parent scope which is your controller. In order to do this,use Object variable instead of primitive data types as it update the value by reference having same memory location.

Try to define SelectedPage object in controller in this way.

$scope.objSelectedPage = {SelectedPage:''};

in HTML

<select data-ng-model="objSelectedPage.SelectedPage" data-ng-change="ShowSelectedPage();"

In ShowSelectedPage

 $scope.ShowSelectedPage = function () {

    console.log($scope.objSelectedPage.SelectedPage);
    $scope.ShowReport($scope.objSelectedPage.SelectedPage);

}

edited Dec 6, 2017 at 15:10

answered Jul 9, 2015 at 10:11

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

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

Collectives™ on Stack Overflow

scope variable not updating with ng-change - angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related