Scope variable not updateable with ng-change - angularjs
It seems like a simple problem, but hard to find. There is a pagination component that has a button and a dropdown. The user can navigate to a page by clicking a button or by selecting that page number from the drop-down menu.
The problem is that nothing happens when you select a value in the dropdown. Since the scope variable does not 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);
}
}]);
Let's say the selected value in the dropdown is 1. When I select 2 in the dropdown, warning1 appears. When clicked Next
, the dropdown menu selection changes to 2 as expected. Now when I select 1 in the dropdown the warning shows 2.
Tried to make a fiddle but dont know how to do it from promise
- http://jsfiddle.net/bpq5wxex/2/
source to share
With your OP, SelectedPage is only a primitive variable .
With every angular directive a new scope is created.
So the SelectedPage doesn't update outside of the ng-repeat scope after the dropdown is changed, i.e. in the parent area, which is your controller. To do this, use Object variable instead of primitive data types, as it updates a value by reference that has the same memory location.
Try to define the SelectedPage object in the controller 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);
}
source to share